uniapp使用scroll-view實現(xiàn)左右上下滑動功能
更新時間：2022年11月24日 15:08:39 作者：@Winner
最近在用uni-app開發(fā)小程序時,需要用scroll-view做出左右上下滑動效果,所以下面這篇文章主要給大家介紹了關(guān)于uniapp使用scroll-view實現(xiàn)左右上下滑動功能的相關(guān)資料,需要的朋友可以參考下
闡述
我們在項目中往往都能遇到實現(xiàn)左右滑動跟上下滑動的需求，不需要安裝 better-scroll uniapp 自帶的scroll-view 就可以實現(xiàn)了。
實現(xiàn)左右滑動
<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>
/* 二級菜單設(shè)置左右滑動 */
.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>
實現(xiàn)上下滑動
<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)
},
//滾動到底部/右邊觸發(fā)
scrolltolower() {
console.log(123213213213);
},
// 滾動到頂部/左邊觸發(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的滾動條
不能單獨設(shè)置到style樣式里面，uniapp要設(shè)置到全局App.vue這個文件下面才可生效。
<style>
/* 去除scroll滾動條 */
::-webkit-scrollbar {
width: 0;
height: 0;
background-color: transparent;
}
</style>
總結(jié)
到此這篇關(guān)于uniapp使用scroll-view實現(xiàn)左右上下滑動功能的文章就介紹到這了,更多相關(guān)uniapp用scroll-view左右上下滑動內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
layui當(dāng)點擊文本框時彈出選擇框,顯示選擇內(nèi)容的例子
今天小編就為大家分享一篇layui當(dāng)點擊文本框時彈出選擇框,顯示選擇內(nèi)容的例子，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
DES加密算法的方法把用戶信息在發(fā)送的時候進(jìn)行加密很實用，下面有個不錯的示例，需要的朋友可以參考下2013-10-10
在本篇內(nèi)容里小編給各位整理了一篇關(guān)于JS實現(xiàn)提示框跟隨鼠標(biāo)移動的相關(guān)實例代碼，需要的朋友們學(xué)習(xí)下。2019-08-08
下面小編就為大家分享一篇webpack-dev-server自動更新頁面方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
這篇文章主要介紹了JavaScript生成有縮進(jìn)的表格代碼的相關(guān)資料,代碼簡單易懂，非常具有參考價值，需要的朋友可以參考下2016-06-06
微信小程序wx.request實現(xiàn)后臺數(shù)據(jù)交互功能分析
這篇文章主要介紹了微信小程序wx.request實現(xiàn)后臺數(shù)據(jù)交互功能,分析微信小程序wx.request在后臺數(shù)據(jù)交互過程中遇到的問題與相關(guān)的解決方法,需要的朋友可以參考下2017-11-11
利用JS實現(xiàn)一個同Excel表現(xiàn)的智能填充算法
這篇文章主要給大家介紹了關(guān)于利用JS實現(xiàn)一個同Excel表現(xiàn)的智能填充算法的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-08-08
JavaScript冒泡算法原理與實現(xiàn)方法深入理解
這篇文章主要介紹了JavaScript冒泡算法,結(jié)合實例形式詳細(xì)分析了JavaScript冒泡算法基本原理、實現(xiàn)方法與相關(guān)注意事項,需要的朋友可以參考下2020-06-06
Javascript調(diào)用函數(shù)方法的幾種方式介紹
這篇文章主要介紹了Javascript調(diào)用函數(shù)方法的幾種方式介紹,本文講解了func()、(function(arg){})(window)、func.bind(sth)()、func.call()、func.apply()等5種方式,需要的朋友可以參考下2015-03-03
webpack proxy,即webpack提供的代理服務(wù),基本行為就是接收客戶端發(fā)送的請求后轉(zhuǎn)發(fā)給其他服務(wù)器,本文給大家介紹了webpack proxy如何解決跨域問題,感興趣的朋友跟隨小編一起看看吧2023-10-10