使用swiper組件
使用swiper,每一頁(yè)的信息都顯示不全,圖片只顯示一半;
原因:swiper元素默認(rèn)的高度為150px高,而圖片默認(rèn)的高度為240px,所以只顯示上面的一部分拧额。
一般設(shè)置寬高時(shí),需要在swiper元素上統(tǒng)一設(shè)置彪腔。
<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>點(diǎn)評(píng):{{item.comment}}</text>
<text hidden='{{!item.isHightlyRecomended}}' style='font-size:16px;color:red;'>強(qiáng)烈推薦</text>
</view>
</swiper-item>
</swiper>
細(xì)節(jié)樣式優(yōu)化
- 設(shè)置面板指示
<swiper indicator-dots='{{true}}'>
.movie-swiper{ height: 90vh; }
刷新顯示第幾張幻燈片
swiper中設(shè)置屬性'current='0''