1.wx:for
通过 wx:for 可以根据指定的数组，循环渲染重复的组件结构，语法如下：
<view wx:for=”{{array}}”>
索引是：{{index}} 当前项是：{{item}}
</view>
js里data：
array:[‘第一个’,’第二个’,’第三个’]
2.wx:key
类似于 Vue 列表渲染中的 :key ，小程序在实现列表渲染时，也建议为渲染出来的列表项指定唯一的 key 值，从而提高渲染的效率，示例代码：
arrays:[
{id:1,name:’aaa’},
{id:2,name:’bbb’},
{id:3,name:’ccc’},
]
<view wx:for=”{{arrays}}” wx:key=”id”>{{item.name}}</view>
1.wx:if
在小程序中，使用 wx:if=”{{condition}}” 来判断是否需要渲染该代码块
在 data里 设置属性 sex: 1
<view wx:if=”{{sex==0}}”>男</view>
<view wx:else>女</view>
2.结合 <block> 使用 wx:if
如果要使用一次性控制多个组件的展示与隐藏，可以使用一个 <block></block> 标签将多个组件包装起来，并在 <block> 标签上使用 wx:if 控制属性
true显示，false隐藏
<block wx:if=”{{true}}”>
<view>男</view>
<view>女</view>
</block>
3.hidden
在 data里 设置属性 type 为 true
<view hidden=”{{type}}”>条件为true则隐藏</view>
通过 bindinput 可以为文本框绑定输入事件
<input bindinput=”inputHeadler”></input>
inputHeadler(e){
console.log(e.detail.value)
},
实现文本框和 data 之间的数据同步
<input value=”{{msg}}” bindinput=”inputHeadler”></input>
data里设置 msg 变量
inputHeadler(e){
//console.log(e.detail.value)
this.setData({
msg: e.detail.value
})
},
可以为组件通过 data-* 自定义属性传参，其中 * 代表的是参数的名字，示例
<button type=”primary” bindtap=”btnTapHeadler2″ data-info=”{{2}}”>事件传参:count+2</button>
<view>
{{count}}
</view>
xxx.js
btnTapHeadler2(e){
this.setData({
count:this.data.count+ e.target.dataset.info
})
},
通过调用 this.setData(dataObject) 方法，可以给页面 data 中的数据重新赋值
xxx.js
data:{
count:0
},
ChangeCount(){
this.setData({
count: this.data.count +1
})
},
xxx.wxml
<view>
{{count}}
</view>
<button type=”primary” bindtap=”btnTapHeadler”>按钮</button>
xxx.js
btnTapHeadler(e){
console.log(e);
},
mustache语法
在 data里 info:’hello world’
<view>
{{info}}
</view>
三元表达式
randomNum: Math.random()* 10
<view>
{{randomNum >5?’选项A’:’选项B’}}
</view>
<button>默认按钮</button>
<button type=”primary”>主色调按钮</button>
<button type=”warn”>警告按钮</button>
<button size=”mini”>默认按钮</button>
<button type=”primary” size=”mini”>主色调按钮</button>
<button type=”warn” size=”mini”>警告按钮</button>
<button size=”mini” plain>默认按钮</button>
<button type=”primary” size=”mini” plain>主色调按钮</button>
<button type=”warn” size=”mini” plain>警告按钮</button>
image组件的基本使用
<image src=”url”></image>
image组件的mode属性
image组件的mode属性用来指定图片的裁剪和缩放模式，常用的mode属性值如下：
长按选中文本效果
<view>
<text selectable>15357240395</text>
</view>
<!– rich-text –>
<rich-text nodes=”<h2 style=’color:red’>标题</h2>”></rich-text>
xxx.wxml
<!– 轮播图结构 –>
<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>
/* 轮播图 */
.swiper-container{height: 150px;}
.item{height: 100%;line-height: 150px;text-align: center;}
swiper-item:nth-child(1){background: lightgreen;}
swiper-item:nth-child(2){background: lightskyblue;}
swiper-item:nth-child(3){background: lightpink;}
常用属性
<swiper class=”swiper-container” indicator-dots indicator-active-color=”white” indicator-color=”gray”
circular autoplay>
xxx.wxml
<scroll-view class=”container2″ scroll-y>
<view>A</view>
<view>B</view>
<view>C</view>
</scroll-view>
xxx.wxss
/*scroll-view 竖向滚动*/
.container2{border: 1px solid blue;margin-bottom: 20px;width: 100px;height: 120px;}
.container2 view{width: 100px;height: 100px;text-align: center;line-height: 100px;}
.container2 view:nth-child(1){background: red}
.container2 view:nth-child(2){background: orange}
.container2 view:nth-child(3){background: green}
<!– 实现flex横向布局 –> xxx.wxml
<view class=”container1″>
<view>A</view>
<view>B</view>
<view>C</view>
</view>
xxx.wxss
/* 分散对齐 justify-content: space-around; */
.container1{display: flex;justify-content: space-around;}
.container1 view{width: 100px;height: 100px;text-align: center;line-height: 100px;}
.container1 view:nth-child(1){background: red}
.container1 view:nth-child(2){background: orange}
.container1 view:nth-child(3){background: green}
