uniapp 横向滚动,微信小程序显示效果
显示效果
uniapp 横向滚动效果
代码
html
<template>
<view>
<view style="padding-top:100rpx;">横向滚动</view>
<scroll-view scroll-x="true" class="scrollView" @scroll="scroll" @scrolltoupper="upper" @scrolltolower="lower" lower-threshold="50" enable-flex>
<view class="scrollView_item">1</view>
<view class="scrollView_item">2</view>
<view class="scrollView_item">3</view>
<view class="scrollView_item">4</view>
<view class="scrollView_item">5</view>
</scroll-view>
</view>
</template>
JS
<script>
export default {
data() {
return {
scrollLeft: 0,
old: {
scrollLeft: 0
}
}
},
methods: {
scroll: function (e) {
console.log(e)
this.old.scrollLeft = e.detail.scrollLeft
},
upper: function (e) {
console.log(e)
},
lower: function (e) {
console.log(e)
},
},
}
</script>
scss
<style lang="scss" scoped>
.scrollView {
$w:400rpx;
$h:240rpx;
overflow: hidden;
white-space: nowrap;
flex-wrap: nowrap;
display: flex;
height: $h;
margin-bottom: 400rpx;
margin-top: 400rpx;
&_item {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 $w;
height: $h;
border: 1px solid #f00;
font-size: 40rpx;
text-align: center;
color: #f00;
}
}
</style>