目录一.常用的视图组件1.view2.scroll-view3.swiper和swiper-item4.text5.rich-text 6.button7.image8.n
使用效果:
wxml文件:
<view class="container1">
<view>A</view>
<view>B</view>
<view>C</view>
</view>
wxss文件:
.container1 view{
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
}
.container1 view:nth-child(1){
background-color: lightblue;
}
.container1 view:nth-child(2){
background-color: lightgreen;
}
.container1 view:nth-child(3){
background-color: lightpink;
}
.container1{
display: flex;
justify-content: space-around;
}
效果图:
使用效果:
wxml文件:
<!-- scroll-y属性:允许纵向滚动 -->
<!-- scroll-x属性:允许横向滚动 -->
<!-- 注意:使用竖向滚动时,必须给scroll-view一个固定高度 -->
<scroll-view class="container1" scroll-y>
<view>A</view>
<view>B</view>
<view>C</view>
</scroll-view>
wxss文件:
.container1 view{
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
}
.container1 view:nth-child(1){
background-color: lightblue;
}
.container1 view:nth-child(2){
background-color: lightgreen;
}
.container1 view:nth-child(3){
background-color: lightpink;
}
.container1{
border: 1px solid red;
height: 120px;
width: 100px;
}
效果图:
可以使用鼠标上下拖动,达到滚动的效果!
轮播图容器组件和轮播图item组件
使用效果:
wxml文件:
<!-- 轮播图区域 -->
<!-- indicator-dots 属性:显示面板指示点 -->
<swiper class="swiper-container">
<swiper-item>
<view class="item">A</view>
</swiper-item>
<swiper-item>
<view class="item">B</view>
</swiper-item>
<swiper-item>
<view class="item">C</view>
</swiper-item>
</swiper>
wxss文件:
.swiper-container{
height: 150px;
}
.item{
height: 100%;
line-height: 150px;
text-align: center;
}
swiper-item:nth-child(1) .item{
background-color: lightgreen;
}
swiper-item:nth-child(2) .item{
background-color: lightblue;
}
swiper-item:nth-child(3) .item{
background-color: lightcoral;
}
效果图:
l circular实现衔接滑动,滑倒C,往右滑动回到A,类似循环队列!!
例如:加上 indicator-dots 属性
<!-- 轮播图区域 -->
<!-- indicator-dots 属性:显示面板指示点 -->
<swiper class="swiper-container" indicator-dots>
<swiper-item>
<view class="item">A</view>
</swiper-item>
<swiper-item>
<view class="item">B</view>
</swiper-item>
<swiper-item>
<view class="item">C</view>
</swiper-item>
</swiper>
效果图:可与上进行对比
使用效果:
wxml文件:
<view>
手机号支持长按选中保存
<text selectable>18814231000</text>
</view>
<!-- 只有在text中的文本才能长按保存(必须加上selectable),view中不可长按保存 -->
效果图:
通过rich-text组件的nodes属性节点,把HTML字符串渲染为对应的UI结构:
wxml文件:
<view>
手机号支持长按选中保存
<text selectable>18814231000</text>
</view>
<!-- 只有在text中的文本才能长按保存(必须加上selectable),view中不可长按保存 -->
<rich-text nodes="<h1 style='color:red;'>标题<h1>"></rich-text>
效果图:
使用效果:
wxml文件:
<!-- 按钮组件的基本使用 -->
<!-- 通过type属性指定按钮颜色类型 -->
<button>普通按钮</button>
<button type="primary">主色调按钮</button>
<button type="warn">警告按钮</button>
<!-- size="mini" 小尺寸按钮 -->
<button size="mini">普通按钮</button>
<button type="primary" size="mini">主色调按钮</button>
<button type="warn" size="mini">警告按钮</button>
<!-- plain 镂空按钮 -->
<button size="mini" plain>普通按钮</button>
<button type="primary" size="mini" plain>主色调按钮</button>
<button type="warn" size="mini" plain>警告按钮</button>
效果图:
使用效果:
wxml文件:
<!-- image 图片组件 -->
<image></image>
<image src="/images/123.jpg"></image>
wxss文件:
image{
border: 1px solid red;
}
效果图:
例如更改属性mode为aspectFit,自适应的,效果图:
<!-- image 图片组件 -->
<image></image>
<image src="/images/123.jpg" mode="aspectFit"></image>
到此这篇关于微信小程序学习之常用的视图组件的文章就介绍到这了,更多相关微信小程序组件内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!
--结束END--
本文标题: 微信小程序学习之常用的视图组件
本文链接: https://www.lsjlt.com/news/170912.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0