快捷導(dǎo)航

uniapp使用scroll-view實(shí)現(xiàn)左右上下滑動(dòng)功能

更新時(shí)間：2022年11月24日 15:08:39 作者：@Winner

最近在用uni-app開發(fā)小程序時(shí),需要用scroll-view做出左右上下滑動(dòng)效果,所以下面這篇文章主要給大家介紹了關(guān)于uniapp使用scroll-view實(shí)現(xiàn)左右上下滑動(dòng)功能的相關(guān)資料,需要的朋友可以參考下

闡述

我們?cè)陧?xiàng)目中往往都能遇到實(shí)現(xiàn)左右滑動(dòng)跟上下滑動(dòng)的需求，不需要安裝 better-scroll uniapp 自帶的scroll-view 就可以實(shí)現(xiàn)了。

實(shí)現(xiàn)左右滑動(dòng)

<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>
	/* 二級(jí)菜單設(shè)置左右滑動(dòng) */
	.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>

實(shí)現(xiàn)上下滑動(dòng)

<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">注冊(cè)地址</view>
							<view class="scroll-view-item center">注冊(cè)地址</view>
							<view class="scroll-view-item bottom">注冊(cè)電話</view>
					</scroll-view>
				</view>
		</view>
	</view>
</template>
<script>
export default {
	data() {
		return {
			
		}
	},
	methods: {
		scroll(event) {
			//距離每個(gè)邊界距離
			console.log(event.detail)
		},
		//滾動(dòng)到底部/右邊觸發(fā)
		scrolltolower() {
				console.log(123213213213);
		},
		// 滾動(dòng)到頂部/左邊觸發(fā)
		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的滾動(dòng)條

不能單獨(dú)設(shè)置到style樣式里面，uniapp要設(shè)置到全局App.vue這個(gè)文件下面才可生效。

<style>
	/* 去除scroll滾動(dòng)條 */
	::-webkit-scrollbar {
		width: 0;
		height: 0;
		background-color: transparent;
	}
</style>

總結(jié)

到此這篇關(guān)于uniapp使用scroll-view實(shí)現(xiàn)左右上下滑動(dòng)功能的文章就介紹到這了,更多相關(guān)uniapp用scroll-view左右上下滑動(dòng)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: