uniapp開發(fā)小程序實現(xiàn)滑動頁面控制元素的顯示和隱藏效果

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

這篇文章主要介紹了uniapp開發(fā)小程序實現(xiàn)滑動頁面控制元素的顯示和隱藏效果,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下

前言

實現(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); //這里可以通過變大變小調整偏移量
      }
    }
  
    @keyframes hideLayer {
      0% {
        transform: translateX(80upx);
      }
  
      100% {
        transform: translateX(0);
      }
    }
  }
</style>

總結以上就是滑動頁面之后對元素顯示和隱藏動畫的實現(xiàn)，本人學藝不精，想跟大家分享一下，歡迎高手指導。

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

您可能感興趣的文章:

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