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

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

      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:%;

  height:;

  padding-bottom:%;

 }

 .icon-img {

    position:absolute;

    top:;

    left:;

    right:;

    bottom: 44rpx;

    box-sizing:border-box;

    padding:10rpx;

 }

 .icon-img-content {

    display:block;

    margin: auto;

    width: 88rpx;

    height: 88rpx;

 }

  .icon-desc{

    position:absolute;

    bottom:;

    left:;

    right:;

    height:44rpx;

    line-height:44rpx;

    font-size: 24rpx;

    text-align:center;

    overflow: hidden;

    white-space: nowrap;

    text-overflow: ellipsis;

  }

.