• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

微信小程序——动态设置swiper的高度

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

根据小程序的设定,swiper组件默认高度为150px,无法根据内容来撑高。如果里面的内容固定还好说,直接设置一个高度就可以了。要是里面内容是动态变化的,这个特性使得我们使用这个组件的时候感到诸多不便。

举个例子:

如下这种情况,如果我们不给它设置一个高度,那么它只会在那个150px局部进行滚动了。

 

那么我们如何动态改变它的高度呢?

情况1:数据每条高度都是一样

原理:获取1条数据的高度*数据的条数。

js代码如下:

const query = wx.createSelectorQuery()
query.select(\'.class-item\').boundingClientRect() 
query.exec(function (res) {
  console.log(res)
  console.log(res[0].height) 
  console.log(res[0].height * data.t.length) 
  let sumHeigth = res[0].height * data.t.length;
  _this.setData({
    swiperHeight: sumHeigth
  })
})
对于 wx..createSelectorQuery() 不太了解的可看下官方文档说明。
 
data.t是ajax请求返回的结果。
 
class-item为单条数据的class,如下图:

 

 

返回结果如下:

 

wxml中赋值:

 

情况2:数据每条高度不一致

原理:给每条数据一个不同的class,再通过微信的selectAll返回每条的数据的高度,把这些高度相加就是整个swiper的高度了。

 

wxml代码截图如下:

class-item{{index}}里面的{{index}}是为了给每条数据不同的class

 

定义一个返回高度的方法:

get_wxml(className, callback) {      
  wx.createSelectorQuery().selectAll(className).boundingClientRect().exec(callback)
},

 

js代码如下: 

let planItemSelect = \'\';
for(let i=0;i<data.t.length;i++){ //data.t是ajax请求返回的数据
  planItemSelect += `.class-list-block${_this.data.status} .class-item${i},` //_this.data.status表示当前是第几个swiper-item
}

let sumHeigth = 0   
_this.get_wxml(planItemSelect, (res) => {
  for (let i = 0; i < res[0].length; i++) {
    sumHeigth += res[0][i].height //获取每条数据的高度并相加
  }
  _this.setData({
    swiperHeight: sumHeigth
  })
})     

 

最后赋值跟情况1最后一步是一样的了。

 

以上就是我动态获取swiper高度的方法了。如果您有更好的处理方法,望不吝赐教哈~~~


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
微信小程序如何获取屏幕高度和宽度发布时间:2022-07-18
下一篇:
精确计算微信小程序scrollview高度,全机型适配发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap