版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/weixin_38023551/article/details/80655087
官方只有一个HTML的代码演示,而css没有;
自己根据官方的HTML代码,尝试几个方案,都GG了;最后实现成功;
因为需要用到scroll-top
的特性;所以还是乖乖的去尝试吧
<scroll-view class="scroll-view_H" scroll-x style="width: 100%">
<view id="green" class="scroll-view-item_H bc_green"></view>
<view id="red" class="scroll-view-item_H bc_red"></view>
<view id="yellow" class="scroll-view-item_H bc_yellow"></view>
<view id="blue" class="scroll-view-item_H bc_blue"></view>
</scroll-view>
首先说一下哪些不能用
1.在子元素上设置float;无效果
2.父元素上设置 display: flex; 同时在设置子元素上 display: inline-block; 无效果
成功的办法:
.scroll-view_H {
width: 100%;
white-space: nowrap;
}
.scroll-view-item_H {
width: 200px;
height: 100px;
display: inline-block;
}
点击按钮,自动移动到相应的元素
<scroll-view class="scroll-view_H" scroll-x scroll-into-view="{{toView}}" scroll-with-animation >
<view id="green1" class="scroll-view-item_H bc_green"></view>
<view id="red1" class="scroll-view-item_H bc_red"></view>
<view id="yellow1" class="scroll-view-item_H bc_yellow"></view>
<view id="blue1" class="scroll-view-item_H bc_blue"></view>
</scroll-view>
<button size="mini" bindtap="tap">click me to scroll into view </button>
<button size="mini" bindtap="tapTips">blue1</button>
这里注意id
不能为数字开头,但是可以拼接数字
const order = ['red1', 'yellow1', 'blue1', 'green1', 'red1']
tap: function (e) {
for (var i = 0; i < order.length; ++i) {
if (order[i] === this.data.toView) {
console.log(order[i + 1])
this.setData({
toView: order[i + 1]
})
break
}
}
},
tapTips(){
this.setData({
toView: "blue1"
})
},