<view>
<scroll-view class="src_X" scroll-x>
<view class="z r"></view>
<view class="z g"></view>
<view class="z b"></view>
<view class="z y"></view>
</scroll-view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
toMyExchange(){
uni.navigateTo({
url:'../myExchange/myExchange'
})
},
scroll: function(e) {
console.log(e)
this.old.scrollTop = e.detail.scrollTop
}
}
}
</script>
<style lang="scss">
.src_X{
width: 710rpx;
height: 300rpx;
white-space: nowrap;//一行展示
.z{
width: 200rpx;
height: 200rpx;
display: inline-block; //行块
}
.r{
background-color: red;
}
.g{
background-color: green;
}
.b{
background-color: blue;
}
.y{
background-color: yellow;
}
}
</style>
scroll-view 横向滚动demo
最新推荐文章于 2024-04-16 22:28:40 发布