使用swiper组件
使用swiper,每一页的信息都显示不全,图片只显示一半;
原因:swiper元素默认的高度为150px高,而图片默认的高度为240px,所以只显示上面的一部分。
一般设置宽高时,需要在swiper元素上统一设置。
<swiper style='background:#eee; height:260px;'>
<swiper-item>
<text>123</text>
<image src='/image/one.jpg'></image>
</swiper-item>
<swiper-item>
<text>456</text>
<image src='/image/qianyuqianxun.jpg'></image>
</swiper-item>
<swiper-item>
<text>789</text>
<image src='/image/one.jpg'></image>
</swiper-item>
</swiper>
swiper和wx:for使用
<swiper>
<swiper-item class='movie' wx:for='{{WeeklyMovies}}'>
<image class='movie-image' src='{{item.imagePath}}'></image>
<view class='movie-details'>
<text>第{{index+1}}周 {{item.name}}</text>
<text>点评:{{item.comment}}</text>
<text hidden='{{!item.isHightlyRecomended}}' style='font-size:16px;color:red;'>强烈推荐</text>
</view>
</swiper-item>
</swiper>
细节样式优化
- 设置面板指示
<swiper indicator-dots='{{true}}'>
.movie-swiper{ height: 90vh; }
刷新显示第几张幻灯片
swiper中设置属性'current='0''
网友评论