微信小程序 swiper height不能设置自适应
时间: 2023-09-20 11:08:17 浏览: 46
可以通过以下方法设置 swiper 高度自适应:
1. 在 wxml 文件中,swiper 的父元素必须设置高度,否则 swiper 高度无法自适应。
2. 在 js 文件中,获取 swiper 父元素的高度,然后通过 setData 方法设置 swiper 的高度。
例如,如果 swiper 父元素的 class 为 .swiper-container,可以在 js 文件中这样设置:
```
Page({
onReady: function () {
var that = this;
wx.createSelectorQuery().select('.swiper-container').boundingClientRect(function (rect) {
that.setData({
swiperHeight: rect.height
})
}).exec()
}
})
```
在 wxml 文件中,将 swiper 的高度设置为变量 swiperHeight:
```
<swiper style='height:{{swiperHeight}}px;'>
<!-- swiper 的内容 -->
</swiper>
```
这样就可以实现 swiper 高度自适应了。
相关问题
微信小程序swiper高度自适应
微信小程序的swiper组件默认是根据图片的高度来设置swiper的高度的,所以如果要实现swiper高度自适应的效果,可以采用以下几种方式:
1. 使用image组件获取图片的高度:在swiper-item中使用image组件来展示图片,并设置mode为aspectFill,然后通过image组件的bindload事件获取到图片加载后的高度,并将该高度动态赋值给swiper组件的高度属性。例如:
```html
<swiper style="height:{{swiperHeight}}px;" current="{{current}}">
<block wx:for="{{imageList}}" wx:key="*this">
<swiper-item>
<image src="{{item}}" mode="aspectFill" bindload="getImageHeight"></image>
</swiper-item>
</block>
</swiper>
```
```javascript
Page({
data: {
swiperHeight: 0,
current: 0,
imageList: ['image1.png', 'image2.png', 'image3.png'],
},
getImageHeight: function(e) {
const { index, height } = e.currentTarget.dataset;
this.setData({
swiperHeight: height
});
}
})
```
2. 使用wx.createSelectorQuery获取图片高度:在onLoad生命周期函数中使用wx.createSelectorQuery来获取图片的高度,并将该高度动态赋值给swiper组件的高度属性。例如:
```javascript
Page({
data: {
swiperHeight: 0,
current: 0,
imageList: ['image1.png', 'image2.png', 'image3.png'],
},
onLoad: function() {
const query = wx.createSelectorQuery();
query.select('.swiper-item-image').boundingClientRect(res => {
this.setData({
swiperHeight: res.height
});
}).exec();
}
})
```
```html
<swiper style="height:{{swiperHeight}}px;" current="{{current}}">
<block wx:for="{{imageList}}" wx:key="*this">
<swiper-item>
<image class="swiper-item-image" src="{{item}}" mode="aspectFill"></image>
</swiper-item>
</block>
</swiper>
```
以上两种方式都可以实现swiper高度自适应的效果,你可以根据自己的实际需求选择其中一种方法来实现。
微信小程序swiper高度
微信小程序中swiper组件的高度可以通过设置swiper-item的高度来决定,swiper-item的高度可以通过内部元素的高度自适应或者通过设置固定高度来确定。
如果你想让swiper-item的高度自适应内部元素的高度,可以在swiper-item中添加一个view元素,设置view元素的高度为100%,然后在view元素中添加需要展示的内容。
如果你想设置swiper-item的固定高度,可以直接在swiper-item中设置height属性,如:
```
<swiper-item>
<view style="height: 200rpx;">内容</view>
</swiper-item>
```
其中200rpx是要设置的高度值,单位是rpx。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)