小程序轮播图的实现

使用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''

©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容