小程序自带swiper-高度自适应(wx获取相同多个类元素)

  • 因为是swiper所以内涵多个相同类名(但是高度不一样!),根据相同类元素的不同高度来设置swiper的高度从而达到自适应高
    所以需要获取相同类元素的节点信息(主要是高度)方法如下
 const SelectorQuery = wx.createSelectorQuery();//获取页面中界面上的节点信息,返回一个SelectorQuery 对象实例
    SelectorQuery.selectAll('.xxx').boundingClientRect();//(选择当前页面下匹配选择器的所有节点)
    SelectorQuery.exec(res=>{//执行所有的请求,请求结果按请求次序构成数组)
      console.log(res,'9999')
    })

注意:swiper高度需要单位px
逻辑:
1.在onLoad()方法里调用getSwiperHight()
2.获取所有swiper-item内容高度组成的数组,getSwiperHight(){}

 // 获取swiper-item高度方法二  
  getSwiperHight(){
    let that = this;
    const SelectorQuery = wx.createSelectorQuery();
    SelectorQuery.selectAll('.xxxx').boundingClientRect();
    SelectorQuery.exec(res=>{
      let swiperitemsH = [];
      res[0].forEach((item,index)=>{
        swiperitemsH.push(item.height);
      });
      let swiperfirst = swiperitemsH[0]+'px';
     that.setData({xxSwiperItemsH:swiperitemsH,swiperHeight:swiperfirst});
    })
  },

3.在点击tab和滑动tab两个行为时调用方法设置设置swiper的 高度

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容