uniapp swiper文字自动轮播的时候内容高度自适应
时间: 2023-10-15 18:05:24 浏览: 48
可以使用 `scroll-view` 组件实现文字自动轮播,并设置 `scroll-y` 属性为 `true`,使其在垂直方向上可以滚动。同时,需要监听 `scroll-view` 的 `scrolltolower` 事件,当滚动到底部时,将文字列表的第一条数据添加到末尾,再移除第一条数据,实现循环滚动。在实现高度自适应时,可以使用 `scroll-view` 的 `bindscrolltolower` 属性配合 `dom` 方法计算内容高度,并动态设置 `scroll-view` 的高度。
示例代码如下:
```html
<template>
<view class="container">
<scroll-view
class="swiper-list"
scroll-y
bindscrolltolower="onScrollToLower"
style="height: {{listHeight}}px;">
<view wx:for="{{textList}}" wx:key="index">{{item}}</view>
</scroll-view>
</view>
</template>
<script>
export default {
data() {
return {
textList: ['这是第一段文字', '这是第二段文字', '这是第三段文字'], // 文字列表
listHeight: 0 // scroll-view 的高度
}
},
mounted() {
this.setListHeight() // 初始化设置 scroll-view 高度
},
methods: {
// 计算 scroll-view 高度
setListHeight() {
const query = uni.createSelectorQuery().in(this)
query.select('.swiper-list').boundingClientRect(data => {
this.listHeight = data.height
}).exec()
},
// 滚动到底部时,循环添加和移除文字
onScrollToLower() {
const firstText = this.textList[0]
this.textList.push(firstText)
this.textList.splice(0, 1)
}
}
}
</script>
<style>
.container {
width: 100%;
height: 300rpx;
}
.swiper-list {
width: 100%;
overflow: hidden;
}
.swiper-list view {
font-size: 28rpx;
line-height: 40rpx;
text-align: center;
}
</style>
```