使用效果:
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; } /*给三个view加上不同的颜色*/ .container1{ display: flex;/*将三个view横向排列*/ 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; } /*给三个view加上不同的颜色*/ .container1{ border: 1px solid red; /*给scroll-view一个固定高度*/ 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>