uniapp 對(duì)于scroll-view滑動(dòng)和頁(yè)面滑動(dòng)的聯(lián)動(dòng)處理方法
更新時(shí)間：2024年08月15日 09:37:53 作者：新生代農(nóng)民工-小王八
這篇文章主要介紹了uniapp 對(duì)于scroll-view滑動(dòng)和頁(yè)面滑動(dòng)的聯(lián)動(dòng)處理方法,本文通過(guò)示例代碼給大家介紹的非常詳細(xì),感興趣的朋友一起看看吧
需求
遇到一個(gè)需求
解決方案
這個(gè)時(shí)候可以做一個(gè)內(nèi)頁(yè)面滑動(dòng)判斷
<!-- scroll-y 做true或者false的判斷是否滑動(dòng) --> <view class="u-menu-wrap" style="background-color: #fff;"> <scroll-view :scroll-y="data.isGo" scroll-with-animation class="u-tab-view menu-scroll-view" :scroll-top="data.scrollTop" :scroll-into-view="data.itemId"> </scroll-view> </view>
//通過(guò)整個(gè)頁(yè)面的滑動(dòng) 來(lái)處理內(nèi)頁(yè)面是否滑動(dòng)
onPageScroll((e)=>{
// e.scrollTop 表示當(dāng)前頁(yè)面滾動(dòng)的距離 單位px
console.log('頁(yè)面滾動(dòng)距離：', e.scrollTop);
if (e.scrollTop == 204) {
data.isGo = true
} else {
data.isGo = false
}
})效果圖
商品列表參考代碼 :src/pages/template/mallMenu/index2.vue · jry/uview-plus - 碼云 - 開(kāi)源中國(guó) (gitee.com)
到此這篇關(guān)于uniapp 對(duì)于scroll-view滑動(dòng)和頁(yè)面滑動(dòng)的聯(lián)動(dòng)處理的文章就介紹到這了,更多相關(guān)uniapp scroll-view頁(yè)面滑動(dòng)聯(lián)動(dòng)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)banner圖輪播效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-02-02
這篇文章主要為大家詳細(xì)介紹了laydate.js日期時(shí)間選擇插件，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-01-01
JavaScript語(yǔ)句錯(cuò)誤throw、try及catch實(shí)例解析
這篇文章主要介紹了JavaScript語(yǔ)句錯(cuò)誤throw、try及catch實(shí)例解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-08-08
深入理解JavaScript Promise鏈?zhǔn)秸{(diào)用與錯(cuò)誤處理機(jī)制
在JavaScript的異步編程中,Promise是一個(gè)非常重要的概念,它允許我們以鏈?zhǔn)降姆绞教幚懋惒讲僮?使得代碼更加清晰和易于管理,本文將通過(guò)一系列代碼示例,深入探討Promise的鏈?zhǔn)秸{(diào)用和錯(cuò)誤處理機(jī)制,需要的朋友可以參考下2024-09-09
在?TypeScript?中，映射類型可以幫助我們避免編寫重復(fù)的代碼，它可以根據(jù)現(xiàn)有類型和定義的一些規(guī)則來(lái)創(chuàng)建新類型。本文我們就來(lái)看一下什么是映射類型以及如何構(gòu)建自己的映射類型2022-08-08
JavaScript躲避行星游戲?qū)崿F(xiàn)全程
本文將使用 canvas 創(chuàng)建一個(gè)躲避小行星游戲。另外將重點(diǎn)介紹的兩個(gè)方面是：如何使用 JavaScript 來(lái)檢測(cè)鍵盤輸入，以及如何在游戲中使用和處理 HTML5 音頻。希望你能夠喜歡2022-08-08
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)商品篩選功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
JavaScript隊(duì)列數(shù)據(jù)結(jié)構(gòu)詳解
這篇文章主要介紹了JavaScript隊(duì)列數(shù)據(jù)結(jié)構(gòu)詳解，隊(duì)列是一種先進(jìn)先出的數(shù)據(jù)結(jié)構(gòu)，隊(duì)列中允許兩種基礎(chǔ)操作，也就是插入和刪除，也就是入隊(duì)和出隊(duì)2022-07-07
輸入有效信息時(shí)會(huì)有一些提示語(yǔ)，比如“請(qǐng)輸入用戶名”和“請(qǐng)輸入密碼”等語(yǔ)言，這篇文章就為大家介紹js實(shí)用技巧之輸入框提示語(yǔ)句的實(shí)現(xiàn)方法，感興趣的小伙伴們可以參考一下2016-07-07
JavaScript自動(dòng)設(shè)置IFrame高度的小例子
JavaScript自動(dòng)設(shè)置IFrame高度的小例子，需要的朋友可以參考一下2013-06-06