uniapp使用scroll-view实现上下左右滑动
文章描述：
在不安装better-scroll的情况下，使用uniapp 自带的scroll-view 实现上下左右滑动效果
左右滑动
template
<template>
<view class="scroll-x">
<scroll-view class="uni-swiper-tab" scroll-x :style="'height:'+scrollH+'upx'">
<view class="scrollx_item">
手机
</view>
<view class="scrollx_item">
电脑
</view>
<view class="scrollx_item">
电视
</view>
<view class="scrollx_item">
冰箱
</view>
<view class="scrollx_item">
洗衣机
</view>
</scroll-view>
</view>
</template>script
export default {
name: "shopping",
data() {
return {
scrollH: 130, // 高度
}
},
}style
page{
background: #fcfcfc;
}
.scroll-x{
background: #fff;
padding: 10px 0;
}
.uni-swiper-tab{
white-space: nowrap;
display: flex;
justify-content: start;
}
.scrollx_item{
display: inline-block;
padding: 6px 20px;
margin:0 20px;
border: 1px solid #eee;
border-radius: 14px;
}
上下滑动
template
<template>
<view>
<scroll-view class="scroll-view" scroll-y="true" :scroll-top="scrollTop" @scroll="scroll" @scrolltoupper="scrolltoupper"
@scrolltolower="scrolltolower">
<view class="scroll-view-item top">第一屏</view>
<view class="scroll-view-item center">第二屏</view>
<view class="scroll-view-item bottom">第三屏</view>
</scroll-view>
</view>
</template>script
export default {
data() {
return {
}
},
methods: {
scroll(event) {
//距离每个边界距离
// console.log(event.detail)
},
//滚动到底部/右边触发
scrolltolower() {
console.log('bottom');
},
// 滚动到顶部/左边触发
scrolltoupper() {
console.log('top');
}
}
}style
.scroll-view {
white-space: nowrap;
height: 200px;
width: 100%;
}
.top {
height: 200px;
width: 100%;
background: red;
}
.center {
height: 200px;
width: 100%;
background: green;
}
.bottom {
height: 200px;
width: 100%;
background: blue;
}
发布时间：2022/08/30
发表评论