微信小程序swiper高度动态适配(子元素高度不固定)

参考文章 

https://developers.weixin.qq.com/community/develop/doc/00008aaf4a473056d1c69a8b253c04

看了他的代码后，其实他已经写了百分之80了，但不完美，只是针对固定定位的。修改代码如下：

原理为在swiper-item的最上面和最下面插入空view，并利用wx的方法获取两个之间的高度差，然后设置给swiper。     有些细节，自己调整下。说真的，搞不懂为什么小程序不把这个组件做好，还得我们自己计算，坑!!!!

<swiper bindchange="swiperChange" current="{{isIndex}}" style="height:{{swiper_height}}">
<swiper-item>
<view id="start{{isIndex}}"></view>
  <view class="item" wx:for="{{listData}}" wx:key="{{index}}">
    <image class="item-img" src="{{item.img}}"></image>
    <view class="item-wrap">
      <view class="item-name text-line-2">{{item.name + index}}</view>
      <view class="item-des text-line-1">{{item.des}}</view>
      <view class="item-price" >{{item.price}}</view>
      <view class="item-add">
        <view class="item-plus"></view>
      </view>
    </view>
  </view>
    
  <view id="end{{isIndex}}"></view>
</swiper-item>
</swiper>

 

page {
  background: #fbf8fb;


 height: 100%;/*必须设置*/

}
 
.item {
  margin: 30rpx 30rpx 0;
  height: 220rpx;
  position: relative;
  border-radius: 8rpx;
  box-shadow: 0 2px 30rpx #eee;
  box-sizing: border-box;
  font-size: 28rpx;
  color: #63595b;
  background: #fff;
  overflow: hidden;
}
 
.item-wrap {
  padding: 20rpx;
}
 
.item-img {
  width: 180rpx;
  height: 180rpx;
  border-radius: 8rpx;
  float: left;
  margin: 20rpx;
}
 
.item-name {
  margin-bottom: 10rpx;
  word-break: break-all;
}
 
.item-des {
  font-size: 24rpx;
  color: #a9a4a5;
  word-break: break-all;
}
 
.item-price {
  color: #c05d70;
  position: absolute;
  left: 220rpx;
  bottom: 20rpx;
}
 
.item-price::before {
  content: '￥';
  font-size: 20rpx;
}
 
.item-price::after {
  content: attr(data-text);
  color: #a9a4a5;
}
 
.item-add {
  position: absolute;
  width: 50rpx;
  height: 50rpx;
  right: 20rpx;
  bottom: 20rpx;
  background: #c05d70;
  border-radius: 50%;
  border: 2rpx solid #fff;
  box-shadow: 0 0 30rpx #e2b5be;
}
 
.item-add::after {
  content: '';
  position: absolute;
  width: 200%;
  height: 200%;
  left: -50%;
  top: -50%;
}
 
.item-plus {
  width: 24rpx;
  height: 24rpx;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
}
 
.item-plus::before {
  content: '';
  width: 24rpx;
  height: 4rpx;
  background: #fff;
  position: absolute;
  left: 0;
  top: 10rpx;
}
 
.item-plus::after {
  content: '';
  width: 4rpx;
  height: 24rpx;
  background: #fff;
  position: absolute;
  left: 10rpx;
  top: 0;
}

const app = getApp()
 
Page({
  data: {
    isIndex: 0,
    swiper_height: 0,
    listData:[]
  },
  
onLoad: function () {

   

   this.getData();

 },

  getData(){
    let { listData } = this.data;
    let _item = {
      img: 'http://yanxuan.nosdn.127.net/149dfa87a7324e184c5526ead81de9ad.png?imageView&thumbnail=430x430&quality=95',
      name: '日式和风懒人沙发',
      des: '随形承托，外套可拆洗',
      price: 139
    }
    wx.showLoading();
    setTimeout(()=>{
      for (var i = 0; i < 101; i++) {
        listData.push(_item)
      }
      this.setData({ listData });
      this.autoHeight()
      wx.hideLoading();
    }, 1000)
     
  },
swiperChange: function (e) {

   this.setData({

     isIndex: e.detail.current

   });


 this.autoHeight();



 },

  autoHeight(){
    
 let isIndex = this.data.isIndex;

     
    wx.createSelectorQuery()
      .select('#end'+isIndex ).boundingClientRect()
      .select('#start'+isIndex ).boundingClientRect().exec(rect => {
      let _space = rect[0].top - rect[1].top;
      _space = _space === 0 ? '100%' : _space+'px';
      this.setData({
        swiper_height: _space
      });
    })
  }
})

 

 

转载于:https://my.oschina.net/u/555639/blog/3065215