小程序和Vue利用swiper实现icons分页显示--动态计算

Posted 2020-11-22 jianxian

这里发现小程序实现步骤,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;
  }

 

 

 

 

.