uniapp開發(fā)小程序?qū)崿F(xiàn)滑動頁面控制元素的顯示和隱藏效果
更新時間：2020年12月10日 10:57:05 作者：Pirate丶love
這篇文章主要介紹了uniapp開發(fā)小程序?qū)崿F(xiàn)滑動頁面控制元素的顯示和隱藏效果,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
前言
實現(xiàn)思路：通過小程序API中的觸摸事件，配合CSS來實現(xiàn)元素的顯示和隱藏。ps（也想過另一種通過監(jiān)聽頁面滾動的方式來實現(xiàn)，不過效果一定很差0.0）
一、需要用到的事件touchmove、touchend
二、話不多說上代碼
1.看需求，如果是整個屏幕滑動后元素發(fā)生變化，最好放在最外面的view
代碼如下：
<view class="container" @touchmove="handletouchstart" @touchend="handletouchend"> <view class="column popupfx" :class="specClass" @click="createHaibao">我是要發(fā)生變化的元素</view> </view>
JS代碼如下：
data() {
return {
specClass: 'hide',
};
},
methods:{
handletouchstart() {
this.specClass = 'show';
},
handletouchend() {
this.specClass = 'hide';
},}
CSS代碼如下：
<style lang="scss">
.popupfx {
position: fixed;
top: 80%;
right: 20upx;
z-index: 10;
&.show {
animation: showLayer 0.2s linear both;
}
&.hide {
animation: hideLayer 0.2s linear both;
}
@keyframes showLayer {
0% {
transform: translateX(0%);
}
100% {
transform: translateX(80upx); //這里可以通過變大變小調(diào)整偏移量
}
}
@keyframes hideLayer {
0% {
transform: translateX(80upx);
}
100% {
transform: translateX(0);
}
}
}
</style>
總結(jié) 以上就是滑動頁面之后對元素顯示和隱藏動畫的實現(xiàn)，本人學(xué)藝不精，想跟大家分享一下，歡迎高手指導(dǎo)。
到此這篇關(guān)于uniapp開發(fā)小程序?qū)崿F(xiàn)滑動頁面控制元素的顯示和隱藏效果的文章就介紹到這了,更多相關(guān)小程序滑動頁面顯示和隱藏內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
onload與onunload想必大家并不陌生吧，下面為大家演示下js中onload與onunload的妙用，感興趣的朋友可以參考下，希望對大家有所幫助2013-08-08
這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)百度淘寶搜索功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-02-02
這篇文章主要介紹了JavaScript Array對象基本方法詳解,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-09-09
這篇文章主要為大家詳細(xì)介紹了原生JS實現(xiàn)勻速圖片輪播動畫,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-10-10
通常我們判斷js圖片大小都是利用images對象，然后再用attr來獲取圖片地址再進(jìn)行判斷就可以了。這篇文章主要介紹了Javascript判斷圖片尺寸大小的實例,需要的朋友可以參考下2014-06-06
js的form表單提交url傳參數(shù)(包含+等特殊字符)的兩種解決方法
下面小編就為大家?guī)硪黄猨s的form表單提交url傳參數(shù)(包含+等特殊字符)的兩種解決方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05
允許網(wǎng)頁寬度自動調(diào)整的"自適應(yīng)網(wǎng)頁設(shè)計"到底是怎么做到的？下面我們就來通過示例來探討下。2015-06-06
highcharts.js數(shù)據(jù)綁定方式代碼實例
這篇文章主要介紹了highcharts.js數(shù)據(jù)綁定方式代碼實例,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-11-11
當(dāng)?shù)刂窓诤袇?shù)，我們可以再目標(biāo)頁面通過window.location.search來獲取我們需要的參數(shù)及其值，接下來為大家介紹下詳細(xì)獲取方法，感興趣的朋友可以參考下哈2013-04-04
jquery中click等事件綁定及移除的幾種方法小結(jié)
這篇文章主要介紹了jquery中綁定事件與解綁事件是常用到的寫法，這里總結(jié)了幾種常見的綁定事件與解綁事件的方法,需要的朋友可以參考下2023-05-05