微信小程序swiper高度自适应，swiper的子元素高度不固定怎么做

微信小程序自动的swiper大家都知道默认高度是150px，如果需要去修改高度，我在网上看到的方式都是用js去动态算高度，今天给大家提供一种新的思路  使用  swiper+scroll-view    css使用display:flex   父元素dingy  flex:1  

废话不多说 直接上代码 ：

wxml：

	
		
			精选
			动态
		
		
			
				
					
						{{item}}
					
				
				
					
						{{item}}
					
				
			
		
	

wxss：

/* pages/talentedPeople/talentStory/talentStory.wxss */
.container {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

/* 中间内容 */

.story_content {
  width: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.content_tit {
  width: 100%;
  height: 100rpx;
  display: flex;
  justify-content: space-around;
  align-items: center;
  border-bottom: 2rpx solid #f2f2f2;
  flex-shrink: 0;
}

.tit {
  width: 30%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.content {
  width: 100%;
  flex: 1;
}

.content_list {
  height: 100%;
}

.content_container {
  display: flex;
  flex-direction: column;
}

.stroy_list {
  flex: 1 0 0;
  height: 100rpx;
}

.active {
  color: #4c59f8;
  border-bottom: 4rpx solid #4c59f8;
}

js:

// pages/talentedPeople/talentStory/talentStory.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    currentIndex: 0
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    // 动态设置title
    wx.setNavigationBarTitle({
      title: '成都人才园'
    })
  },


  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  // 点击切换
  clickCurrentChange(e) {
    let that = this
    that.setData({
      currentIndex: e.currentTarget.dataset.currentindex
    })
  },

  // swiper左右滑动
  currentChange(e) {
    let that = this
    that.setData({
      currentIndex: e.detail.current
    })
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

})

 

需要注意   在page  必须设置高度100vh  display:flex  flex-direction: column;   子元素必须  width: 100%;  flex: 1; display: flex;flex-direction: column;    包裹 swiper的容器必须设置 width: 100%;flex: 1;   swiper容器 设置高度100%；   swiper-item 设置 display：flex ；  flex-direction: column;      scroll-view 设置  scroll-y="true"    flex: 1 0 0;  height: 100rpx;  就行了  。 flex属性可以去百度查询下      flex-shrink: 0;   元素大小不缩放   flex 1 代表 放大

在 .json文件添加 "disableScroll":true,