小程序swiper限高高度自适应解决方案

方案一：满屏

QQ截图20181212112423.png

/*wxml*/
 

切记是行内样式

/*wxss*/
swiper-item {
  overflow: scroll;
}

ok完美解决！

方案二：半屏

这个才是重点，小二，上酸菜！！

QQ截图20181212113929.png

这个就不能行内设置height:100%;了,要根据元素节点动态设置高，红框中的是我的循环元素，要获得每个swiper-item的高

//js
get_wxml: function (className, callback){
    wx.createSelectorQuery().selectAll(className).boundingClientRect(callback).exec()
  },
wx.request({
      url: baseUrl + 'm=wttapi&a=getcategories',
      method: "POST",
      header: {
        "Content-Type": "application/x-www-form-urlencoded"
      },
      success: function(res) {
        console.log(res)
        that.setData({
          scrollNav: res.data.data[1],
          scrollContent: res.data.data[2],
          indexTit: res.data.data[1][0].name
        })
        let change_id = that.data.scrollNav[that.data.idx].cid//动态获取每个swiper-item元素节点的id
        that.setData({
          swiper_length: that.data.scrollNav.length-1//获取节点数量
        })
        //获取节点信息
        that.get_wxml(`#cont${change_id}`,(rects)=>{
          that.setData({
            height:rects[0].height
          })
        })
      }
    })

/*wxml*/

    
      
      
        
          
            
            {{item[0].pcname}}
            
          
          
            
              
              
                
                  {{item.name}}
                  今日最值
                
                {{item.price}}
              
            
          
        
      
    
  

ok，小白一枚，以上两种方案是小程序初步踩坑经验