码迷,mamicode.com
首页 > 微信 > 详细

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

时间:2019-11-24 13:57:05      阅读:88      评论:0      收藏:0      [点我收藏+]

标签: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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!