美文网首页
小程序轮播图的实现

小程序轮播图的实现

作者: 赵一矛 | 来源:发表于2019-07-02 09:58 被阅读0次

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

相关文章

网友评论

      本文标题:小程序轮播图的实现

      本文链接:https://www.haomeiwen.com/subject/oddkeqtx.html