uniapp使用scroll-view实现左右，上下滑动
阐述
- 我们在项目中往往都能遇到实现左右滑动跟上下滑动的需求，不需要安装better-scroll uniapp 自带的scroll-view 就可以实现了。
实现左右滑动
<view class="model_scrollx flex_row">
<scroll-view class="uni-swiper-tab" scroll-x :style="'height:'+scrollH+'px'">
<view class="scrollx_items">
<button class="guige1 guige-active">苹果</button>
</view>
<view class="scrollx_items">
<button class="guige1 guige-active">菠萝</button>
</view>
<view class="scrollx_items">
<button class="guige1 guige-active">香蕉</button>
</view>
</scroll-view>
</view>
<script>
export default {
name: "shopping",
data() {
return {
scrollH: 130, // 高度
}
},
}
</script>
<style>
/* 二级菜单设置左右滑动 */
.uni-swiper-tab{
white-space: nowrap;
}
.model_scrollx{
justify-content: space-between;
height: 45px;
/* background-color: #F1EFEF; */
align-items: center;
}
.scrollx_items{
text-align: center;
display: inline-block;
width: 210rpx;
box-sizing: border-box;
margin-left: 30rpx;
margin-top: 3px;
}
.scrollx_items:last-child{
margin-right: 30rpx;
}
.scrollx_items image{
width: 70rpx;
height: 66rpx;
}
.tgyx_title{
font-size: 28rpx;
color: #333333;
margin-top: 30rpx;
}
.tgyx_desc{
font-size: 24rpx;
margin-top: 10rpx;
}
</style>
实现上下滑动
<template>
<view>
<view class="uni-padding-wrap uni-common-mt">
<view>
<scroll-view class="scroll-view" scroll-y="true" :scroll-top="scrollTop" @scroll="scroll" @scrolltoupper="upper"
@scrolltolower="lower">
<view class="scroll-view-item top">注册地址</view>
<view class="scroll-view-item center">注册地址</view>
<view class="scroll-view-item bottom">注册电话</view>
</scroll-view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
scroll(event) {
//距离每个边界距离
console.log(event.detail)
},
//滚动到底部/右边触发
scrolltolower() {
console.log(123213213213);
},
// 滚动到顶部/左边触发
scrolltoupper() {
console.log(2232332);
}
}
}
</script>
<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;
}
</style>
去掉scroll-view的滚动条
- 不能单独设置到style样式里面，uniapp要设置到全局App.vue这个文件下面才可生效。
<style>
/* 去除scroll滚动条 */
::-webkit-scrollbar {
width: 0;
height: 0;
background-color: transparent;
}
</style>
