底部分割线
border-bottom: 3px solid rgba(128, 128, 128, 0.089);竖向 平均分配位置
.huodong_style ._right{ flex: 1; padding: 10px; display: flex; flex-direction: column; justify-content: space-between; }app.json里的tabBar window
属性绑定 根据Boolean 判断是否展示 著名歌手和 底部分割线颜色 xxx.js
/** * 页面的初始数据 */ data: { img_url: "/assets/image/hh.jpeg", item_title: "New World", item_singger: "华晨宇", item_data: 20200703, is_pop: true },xxx.wxml
<view class="huodong_style {{is_pop ? 'pop' : ''}}"> <view class="_left"> <image class="img_style" src="{{img_url}}" mode="aspectFill"/> </view> <view class="_right"> <text class="title">新专辑《{{item_title}}》</text> <text class="singger">歌手： {{item_singger}} <text class="pop" wx:if="{{is_pop}}">著名歌手</text></text> <text class="data">销量：{{item_data >= 1000 ? item_data/1000 + "k" : item_data}} 张</text> </view> </view>分割线区分
逻辑判断 if elif else
/** * 页面的初始数据 */ data: { ... score: 59 } <view wx:if="{{score == 100}}">满分</view> <view wx:elif="{{score >= 90}}">优秀</view> <view wx:elif="{{score >= 60}}">普通</view> <view wx:else>不及格</view>如果需要展示一组数据，可以通过block标签包裹，block不被渲染。
<block wx:if="{{score == 100}}"> <view >满分</view> <view>奖励1个亿</view> </block> <block wx:else> <view>不及格</view> <view>带你去爬山</view> </block>数据 xxx.js
/** * 页面的初始数据 */ data: { list: [{ img_url: "/assets/image/hh.jpeg", item_title: "斗牛", item_singger: "华晨宇", item_data: 200000, is_pop: true, score: 59 }, { img_url: "/assets/image/hh.jpeg", item_title: "新世界", item_singger: "华晨宇", item_data: 3000200, is_pop: true, score: 59 }, { img_url: "/assets/image/hh.jpeg", item_title: "疯人院", item_singger: "华晨宇", item_data: 12365487, is_pop: false, score: 59 }, { img_url: "/assets/image/hh.jpeg", item_title: "神树", item_singger: "华晨宇", item_data: 20200703, is_pop: false, score: 59 }, { img_url: "/assets/image/hh.jpeg", item_title: "降临", item_singger: "华晨宇", item_data: 5515168, is_pop: false, score: 59 }, { img_url: "/assets/image/hh.jpeg", item_title: "寒鸦少年", item_singger: "华晨宇", item_data: 99999999, is_pop: true, score: 59 } ] }xxx.wxml 通过**<block** 标签 和 wx:for=“{{list}}” 去遍历数组 所有的数据从item里取即可
<block wx:for="{{list}}"> <view class="huodong_style {{item.is_pop ? 'pop' : ''}}"> <view class="_left"> <image class="img_style" src="{{item.img_url}}" mode="aspectFill" /> </view> <view class="_right"> <text class="title">新专辑 《New World》——{{item.item_title}}</text> <text class="singger">歌手： {{item.item_singger}} <text class="pop" wx:if="{{item.is_pop}}">热播</text></text> <text class="data">播放量：{{item.item_data >= 1000 ? item.item_data/1000 + "k" : item.item_data}} </text> </view> </view> </block>如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态（如 input 中的输入内容，switch 的选中状态），需要使用 wx:key 来指定列表中项目的唯一的标识符。
wx:key 的值以两种形式提供
字符串，代表在 for 循环的 array 中 item 的某个 property，该 property 的值需要是列表中唯一的字符串或数字，且不能动态改变。 xxx.wxml *因为是对象所以不能用“this”，所以对象里增加id属性 id: 1
<block wx:for="{{list}}" wx:key="id"> <view class="huodong_style {{item.is_pop ? 'pop' : ''}}"> <view class="_left"> <image class="img_style" src="{{item.img_url}}" mode="aspectFill" /> </view> <view class="_right"> <text class="title">新专辑 《New World》——{{item.item_title}}</text> <text class="singger">歌手： {{item.item_singger}} <text class="pop" wx:if="{{item.is_pop}}">热播</text></text> <text class="data">播放量：{{item.item_data >= 1000 ? item.item_data/1000 + "k" : item.item_data}} </text> </view> </view> </block>xxx.js
data: { ..., list: [{ id: 1, img_url: "/assets/image/hh.jpeg", item_title: "斗牛", item_singger: "华晨宇", item_data: 200000, is_pop: true, score: 59 }, { id: 2, img_url: "/assets/image/hh.jpeg", item_title: "新世界", item_singger: "华晨宇", item_data: 3000200, is_pop: true, score: 59 }, ... { id: 6, img_url: "/assets/image/hh.jpeg", item_title: "寒鸦少年", item_singger: "华晨宇", item_data: 99999999, is_pop: true, score: 59 } ] },保留关键字 *this 代表在 for 循环中的 item 本身，这种表示需要 item 本身是一个唯一的字符串或者数字。 *wx:key="this" xxx.wxml
<block wx:for="{{test_key_data}}" wx:key="*this"> <switch /> <text>{{item}}</text> </block> <button bindtap="_touch">增加</button>xxx.js
_touch: function () { // 动态修改元数据 this.data.test_key_data.unshift("d") this.setData({ test_key_data : this.data.test_key_data }) }, /** * 页面的初始数据 */ data: { test_key_data: [ "a", "b", "c" ],....