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