微信小程序学习打卡（3） - Skye_yang
发布时间：2022-09-08 10:18:12作者：顺晟科技点击：
微信小程序学习打卡（3）
一、数据绑定
在js文件Page中添加data对象，在data对象中自定义对象，属性，在wxml文件中用{{属性}}绑定数据。
data: { thisWeeklyMovie: { name: "教父", comment: "zzzz", imagePath: "/imahes/daqiao.jpg", isHighlyRecommended:true }, count: 123, score: 58 }二、条件渲染
1、用wx:if实现条件渲染，满足条件时出现当前样式
<text wx:if="{{thisWeeklyMovie.isHighlyRecommended}}" style=\'font-size:16px;color:red\'>强烈推荐</text>2、用hidden隐藏样式实现条件渲染 注意：取反
<text hidden="{{!thisWeeklyMovie.isHighlyRecommended}}" style=\'font-size:16px;color:red\'>强烈推荐</text> 3、两者比较： 1）hidden先渲染生成，控制其隐藏；wx:if条件成立才渲染生成，hidden初始化开销较大 2）可见性频繁切换时，wx:if条件渲染开销较大，不建议使用，此时使用hidden 三、列表渲染 wx:for应用，在js文件中定义数组，在wxml文件中用wx:for循环样式输出，item表示数组对象 wxml文件： <view class=\'container\'> <text>本周推荐</text> <view class=\'movie\' wx:for="{{WeeklyMovieList}}" wx:key="WeeklyMovieListId" > <image src=\'{{item.imagePath}}\' class=\'movie-image\'></image> <view class=\'movie-detail\'> <text>第{{index+1}}周：{{item.name}}</text> <text>点评:{{item.comment}}</text> <text wx:if="{{item.isHighlyRecommended}}" style=\'font-size:16px;color:red\'>强烈推荐</text> </view> </view> </view> JS文件： data: { WeeklyMovieList: [ { name: "教父", comment: "zzzz", imagePath: "/images/daqiao.jpg", isHighlyRecommended: true }, { name: "泰坦尼克号", comment: "zzzz", imagePath: "/images/daqiao.jpg", isHighlyRecommended: true }, { name: "大鱼", comment: "zzzz", imagePath: "/images/daqiao.jpg", isHighlyRecommended: true } ], count: 123, score: 58 } 效果图：
四、swiper的使用(轮播图的实现)
<swiper>
<swiper-item>内容</swiper-item>
</swiper>
底部小圆点：indicator-dots=\'{{true}}\'
示例代码：
<view> <swiper indicator-dots=\'{{true}}\' class=\'movie-swiper\' previous-margin=\'50rpx\' next-margin=\'50rpx\'> <swiper-item class=\'movie\' wx:for="{{WeeklyMovieList}}" wx:key="WeeklyMovieListId" > <view class=\'container movie-cart\'> <image src=\'{{item.imagePath}}\' class=\'movie-image\'></image> <text>第{{index+1}}周：{{item.name}}</text> <text>点评:{{item.comment}}</text> <text wx:if="{{item.isHighlyRecommended}}" style=\'font-size:16px;color:red\'>强烈推荐</text> </view> </swiper-item> </swiper> </view> 效果图：
发表于 2018-04-10 19:16 Skye_yang 阅读(1254) 评论(0) 编辑 收藏 举报
- 上一篇 : 微信小程序的支付流程
- 下一篇 : 微信小程序学习打卡（2） - Skye_yang
