- 发布:2024-08-31 18:21
- 更新:2024-09-05 16:27
- 阅读:79
产品分类: uniapp/App
PC开发环境操作系统: Windows
PC开发环境操作系统版本号: 4.0.8
HBuilderX类型: 正式
HBuilderX版本号: 4.08
手机系统: 全部
页面类型: vue
vue版本: vue2
打包方式: 云端
项目创建方式: HBuilderX
测试过的手机:
示例代码:
<template>
<view class="content">
<view>
<scroll-view scroll-y style="height: 30vh">
{{content}}
</scroll-view>
</view>
<view>
<button @click="toggle('up')">上一条</button>
<button @click="toggle('down')">下一条</button>
</view>
</view>
</template>
<script>
export default {
data() {
return {
title: 'Hello',
content: '',
currentIndex: 0,
conts: [
'111111开启 scroll anchoring 特性,即控制滚动位置不随内容变化而抖动,仅在 iOS 下生效,安卓下可参考 CSS overflow-anchor 属性。',
'222222滚动时触发,event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}',
'333333以下示例代码,来自于hello uni-app项目,推荐使用HBuilderX,新建uni-app项目,选择hello uni-app模板,可直接体验完整示例。'
]
}
},
onLoad() {
this.content = this.conts[this.currentIndex] || ''
},
methods: {
toggle(type) {
let cIndex = this.currentIndex
console.log(type, cIndex, 2222)
switch (type) {
case 'up':
if (cIndex <= 0) cIndex = 0
else cIndex -= 1
break;
case 'down':
if (cIndex >= this.conts.length - 1) cIndex = this.conts.length - 1
else cIndex += 1
break;
}
this.currentIndex = cIndex
this.content = this.conts[cIndex] || ''
}
}
}
</script>
<template>
<view class="content">
<view>
<scroll-view scroll-y style="height: 30vh">
{{content}}
</scroll-view>
</view>
<view>
<button @click="toggle('up')">上一条</button>
<button @click="toggle('down')">下一条</button>
</view>
</view>
</template>
<script>
export default {
data() {
return {
title: 'Hello',
content: '',
currentIndex: 0,
conts: [
'111111开启 scroll anchoring 特性,即控制滚动位置不随内容变化而抖动,仅在 iOS 下生效,安卓下可参考 CSS overflow-anchor 属性。',
'222222滚动时触发,event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}',
'333333以下示例代码,来自于hello uni-app项目,推荐使用HBuilderX,新建uni-app项目,选择hello uni-app模板,可直接体验完整示例。'
]
}
},
onLoad() {
this.content = this.conts[this.currentIndex] || ''
},
methods: {
toggle(type) {
let cIndex = this.currentIndex
console.log(type, cIndex, 2222)
switch (type) {
case 'up':
if (cIndex <= 0) cIndex = 0
else cIndex -= 1
break;
case 'down':
if (cIndex >= this.conts.length - 1) cIndex = this.conts.length - 1
else cIndex += 1
break;
}
this.currentIndex = cIndex
this.content = this.conts[cIndex] || ''
}
}
}
</script>
操作步骤:
APP不能使用数据线,需要打包后,再打开APP操作
APP不能使用数据线,需要打包后,再打开APP操作
预期结果:
上一条/下一条,展示对应数据
上一条/下一条,展示对应数据
实际结果:
由于scroll-view缓存问题,打包后运行APP,切换上一条/下一条时,内容不清除,拼接下一条内容
由于scroll-view缓存问题,打包后运行APP,切换上一条/下一条时,内容不清除,拼接下一条内容
靐齉齾麤龖龗
加个key
2024-09-05 16:53