标签:tom space active nload content oat margin width each
这里发现小程序实现步骤,Vue与之类似
先上效果图:
<view class="icons"> <swiper indicator-dots="true" indicator-active-color="rgba(0,175,190,.8)" style=‘height: 360rpx;‘> <swiper-item wx:for="{{iconsSwriper}}" wx:key="{{index}}" wx:for-item="i"> <view class="icon" wx:for="{{i}}" wx:for-item="icons"> <view class="icon-img"> <image class="icon-img-content" src="{{icons.icon}}" /> </view> <view class="icon-desc">{{icons.title}}</view> </view> </swiper-item> </swiper> </view>
页面加载时,遍历icons,且对 icon 的个数进行动态计算,将结果 push 到一个数组中。
/** * 生命周期函数--监听页面加载 */ onLoad: function (options) { const iconsSwriper = [] this.data.icons.forEach((item, index) => { const page = Math.floor(index / 8) if (!iconsSwriper[page]) { iconsSwriper[page] = [] } iconsSwriper[page].push(item) }) this.setData({ iconsSwriper: iconsSwriper }) console.log(‘iconsSwriper---‘, this.data.iconsSwriper) }
data: { iconsSwriper: [], icons: [ { icon: "http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png", title: "景点门票" }, { icon: "http://img1.qunarzz.com/piao/fusion/1804/ff/fdf170ee89594b02.png", title: "广州必游" }, { icon: "http://img1.qunarzz.com/piao/fusion/1803/76/eb88861d78fb9902.png", title: "动植物园" }, { icon: "http://img1.qunarzz.com/piao/fusion/1803/95/8246f27355943202.png", title: "游乐场" }, { icon: "http://img1.qunarzz.com/piao/fusion/1803/89/55083b0f1951f302.png", title: "两江夜游" }, { icon: "http://img1.qunarzz.com/piao/fusion/1803/3e/86314b2af03b7502.png", title: "水上乐园" }, { icon: "http://img1.qunarzz.com/piao/fusion/1804/5a/13ceb38dcf262f02.png", title: "一日游" }, { icon: "http://img1.qunarzz.com/piao/fusion/1803/90/59a2f523ee2f9202.png", title: "农家度假" }, { icon: "http://img1.qunarzz.com/piao/fusion/1803/b1/528a9e80403b8c02.png", title: "玩转长隆" }, { icon: "http://img1.qunarzz.com/piao/fusion/1803/80/416c6ab3368d1f02.png", title: "全部玩乐" } ], }
注意:css里图片宽高比是按照比例去顶的
.icons { margin-top: 10rpx; } .icons .icon { position:relative; overflow:hidden; float:left; width:25%; height:0; padding-bottom:20%; } .icon-img { position:absolute; top:0; left:0; right:0; bottom: 44rpx; box-sizing:border-box; padding:10rpx; } .icon-img-content { display:block; margin:0 auto; width: 88rpx; height: 88rpx; } .icon-desc{ position:absolute; bottom:0; left:0; right:0; height:44rpx; line-height:44rpx; font-size: 24rpx; text-align:center; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.
小程序和Vue利用swiper实现icons分页显示--动态计算
标签:tom space active nload content oat margin width each
原文地址:https://www.cnblogs.com/jianxian/p/11922091.html