小程序 swiper 高度自适应

代码:
wxml 页面:
<swiper class="swiper" style="height: {{height+'px'}}" indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
<swiper-item>
<view class="timu_list">
这里是内容
<view>很长很长的内容</view>
</view>
</swiper-item>
</swiper>
js 页面:
// pages/timu/timu.js
Page({
/**
* 页面的初始数据
*/
data: {
// 屏幕高度
height:0,
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
this.height()
},
// 获取轮播滑动的 高度
height:function(){
let that = this;
var query = wx.createSelectorQuery();
query.select('.timu_list').boundingClientRect(function (rect) {
that.setData({
// 获取要循环标签的高度
height: rect.height ,
})
// console.log(that.data.height);
}).exec();
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
小程序swiper高度自适应实现
这篇博客详细介绍了如何在小程序中实现swiper组件的高度自适应,通过wx.createSelectorQuery()获取内容区域的高度,并设置到swiper的样式中,确保内容在滑动时能正确显示。代码示例包括WXML和JS部分,适用于小程序开发中需要内容滚动的场景。
3773





