快捷導(dǎo)航

uniapp開(kāi)發(fā)小程序?qū)崿F(xiàn)滑動(dòng)頁(yè)面控制元素的顯示和隱藏效果

更新時(shí)間：2020年12月10日 10:57:05 作者：Pirate丶love

這篇文章主要介紹了uniapp開(kāi)發(fā)小程序?qū)崿F(xiàn)滑動(dòng)頁(yè)面控制元素的顯示和隱藏效果,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

前言

實(shí)現(xiàn)思路：通過(guò)小程序API中的觸摸事件，配合CSS來(lái)實(shí)現(xiàn)元素的顯示和隱藏。ps（也想過(guò)另一種通過(guò)監(jiān)聽(tīng)頁(yè)面滾動(dòng)的方式來(lái)實(shí)現(xiàn)，不過(guò)效果一定很差0.0）

一、需要用到的事件touchmove、touchend

二、話(huà)不多說(shuō)上代碼

1.看需求，如果是整個(gè)屏幕滑動(dòng)后元素發(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); //這里可以通過(guò)變大變小調(diào)整偏移量
      }
    }
  
    @keyframes hideLayer {
      0% {
        transform: translateX(80upx);
      }
  
      100% {
        transform: translateX(0);
      }
    }
  }
</style>

總結(jié) 以上就是滑動(dòng)頁(yè)面之后對(duì)元素顯示和隱藏動(dòng)畫(huà)的實(shí)現(xiàn)，本人學(xué)藝不精，想跟大家分享一下，歡迎高手指導(dǎo)。

到此這篇關(guān)于uniapp開(kāi)發(fā)小程序?qū)崿F(xiàn)滑動(dòng)頁(yè)面控制元素的顯示和隱藏效果的文章就介紹到這了,更多相關(guān)小程序滑動(dòng)頁(yè)面顯示和隱藏內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

js中onload與onunload的使用示例
onload與onunload想必大家并不陌生吧，下面為大家演示下js中onload與onunload的妙用，感興趣的朋友可以參考下，希望對(duì)大家有所幫助
2013-08-08
js實(shí)現(xiàn)百度淘寶搜索功能
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)百度淘寶搜索功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-02-02
JavaScript Array對(duì)象基本方法詳解
這篇文章主要介紹了JavaScript Array對(duì)象基本方法詳解,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2019-09-09
原生JS實(shí)現(xiàn)勻速圖片輪播動(dòng)畫(huà)
這篇文章主要為大家詳細(xì)介紹了原生JS實(shí)現(xiàn)勻速圖片輪播動(dòng)畫(huà),具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-10-10
Javascript判斷圖片尺寸大小實(shí)例分析
通常我們判斷js圖片大小都是利用images對(duì)象，然后再用attr來(lái)獲取圖片地址再進(jìn)行判斷就可以了。這篇文章主要介紹了Javascript判斷圖片尺寸大小的實(shí)例,需要的朋友可以參考下
2014-06-06
js的form表單提交url傳參數(shù)(包含+等特殊字符)的兩種解決方法
下面小編就為大家?guī)?lái)一篇js的form表單提交url傳參數(shù)(包含+等特殊字符)的兩種解決方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-05-05
JS制作手機(jī)端自適應(yīng)縮放顯示
允許網(wǎng)頁(yè)寬度自動(dòng)調(diào)整的"自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)"到底是怎么做到的？下面我們就來(lái)通過(guò)示例來(lái)探討下。
2015-06-06
highcharts.js數(shù)據(jù)綁定方式代碼實(shí)例
這篇文章主要介紹了highcharts.js數(shù)據(jù)綁定方式代碼實(shí)例,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2019-11-11
js 獲取(接收)地址欄參數(shù)值的方法
當(dāng)?shù)刂窓诤袇?shù)，我們可以再目標(biāo)頁(yè)面通過(guò)window.location.search來(lái)獲取我們需要的參數(shù)及其值，接下來(lái)為大家介紹下詳細(xì)獲取方法，感興趣的朋友可以參考下哈
2013-04-04
jquery中click等事件綁定及移除的幾種方法小結(jié)
這篇文章主要介紹了jquery中綁定事件與解綁事件是常用到的寫(xiě)法，這里總結(jié)了幾種常見(jiàn)的綁定事件與解綁事件的方法,需要的朋友可以參考下
2023-05-05