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

page {
  background: #fbf8fb;
}
 
.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;
}
.swiper{
  position: relative;
}
.start-view{
   position: absolute;
   top: 0;
}
.end-view{
  position: absolute;
  bottom: 0;
}

const app = getApp()
 
Page({
  data: {
    baseItemHeight: 0,
    swiper_height: 0,
    listData:[],
    loadTips:'上拉加载更多'
  },
  

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();
    this.setData({ loadTips: '加载中...' });
    setTimeout(()=>{
      for (var i = 0; i < 101; i++) {
        listData.push(_item)
      }
      this.setData({ listData, loadTips: '上拉加载更多' });
      this.autoHeight()
      wx.hideLoading();
    }, 1000)
     
  },
  autoHeight(){
    let { listData, baseItemHeight} = this.data;
     
    wx.createSelectorQuery()
      .select('#load').boundingClientRect()
      .select('#mark').boundingClientRect().exec(rect => {
      let _space = rect[0].top - rect[1].top;
        
      this.setData({
        swiper_height: _space
      });
    })
  }
})

<swiper current="isIndex" style="height:{{swiper_height}}px">
<swiper-item>
<view id="mark" style="width: 0;height:0;">visibility:hidden;</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 class="load" id="load">zzzz</view>
</swiper-item>
</swiper>

参考文章https://developers.weixin.qq.com/community/develop/doc/00008aaf4a473056d1c69a8b253c04 看了他的代码后，其实他已经写了百分之80了，但不完美，只是针对固定定位的。修改代码如下：     有些细节，自己调整下。说真的，搞不懂为什么小程序不把这个组件做好，还得我们自己计算，坑!!!!

小程序论坛https://developers.weixin.qq.com/community/develop/article/doc/000e24214b0d10de51880c8f556413