WeChat-App:视图层操作

在这里插入图片描述



视图层的操作

数据绑定
{{ message }} 其中message变量需要在视图层js文件中的data中声明
* 列表渲染(适用于列表型数据读取后在视图层的显示)

	<view wx:for="{{ array_data }}">
	 	 <text decode="{{ true }}">{{ index+1 }}:&nbsp;&nbsp;{{ item }}</text>
	</view> 

条件渲染

	<view wx:if="{{ length > 5 }}">Length大于5</view>
	<view wx:elif="{{ length > 2 }}">Length大于2小于等于5</view>
	<view wx:else>Length小于等于2</view>

绑定事件(逻辑与视图分离)

	<view bindtab="tabEvent_1">点击我啊~</view>
	<view bindtouchstart='startTouch' bindtouchmove='endTouch'>快点击我啊~</view>
	tabEvent_1:function(event){
		   console.log("用户点击事件触发")
	}


视图层中的空格

需要在view标签中配合text标签使用:

<view wx:for="{{ array_data }}">
  <text decode="{{ true }}">{{ index+1 }}:&nbsp;&nbsp;{{ item }}</text>
</view> 



猜你喜欢

转载自blog.csdn.net/qq_42292831/article/details/94610465