欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

uniapp項(xiàng)目實(shí)踐自定義滑動(dòng)觸摸組件實(shí)現(xiàn)示例

 更新時(shí)間：2023年09月06日 08:37:45   作者：MarkGuan  
這篇文章主要介紹了uniapp項(xiàng)目實(shí)踐自定義滑動(dòng)觸摸組件實(shí)現(xiàn)示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

準(zhǔn)備工作

在 APP 的日常開放過程中，我們經(jīng)?？梢钥吹缴侠⑿?、下拉刷新、左滑、右滑、觸底加載等效果，那其中的原理是如何呢，又是如何實(shí)現(xiàn)的呢，下面就一探究竟。這篇文章主要是講述自定義滑動(dòng)觸摸組件的方放，兼容網(wǎng)頁 H5 端、微信小程序端和 App 端。

  • 在components新建一個(gè)q-swiper文件夾，并新建一個(gè)q-swiper.vue的組件；
  • 按照前一篇所說的頁面結(jié)構(gòu)，編寫好預(yù)定的滑動(dòng)觸摸頁面；

原理分析

自定義滑動(dòng)觸摸組件就是采用普通的方法進(jìn)行判斷滑動(dòng)上下左右的距離，從而實(shí)現(xiàn)滑動(dòng)效果。

主要使用到的事件有ontouchstart、ontouchend、onmousedown和onmouseup。

根據(jù)pageX、pageY、clientX和clientY來判斷滑動(dòng)方向從而實(shí)現(xiàn)滑動(dòng)功能。

組件實(shí)現(xiàn)

準(zhǔn)備工作和原理分析完成后，接下來寫一個(gè)簡單的自定義滑動(dòng)模塊組件。

模板部分

<view
  class="q-swiper"
  @touchstart="handlerStart"
  @touchend="handlerEnd"
  @mousedown="handlerStart"
  @mouseup="handlerEnd">
  <slot name="content">
    <!-- 插槽自定義內(nèi)容 -->
  </slot>
</view>

樣式部分

.q-swiper {
  width: 100%;
  height: 100%;
}

腳本部分

  • 引入依賴包和屬性設(shè)置
import { reactive } from "vue";
// 滑動(dòng)信息
const touchInfo = reactive({
  touchX: "",
  touchY: "",
});
// 滑動(dòng)類型
const touchTypes = reactive({
  left: {
    id: 1,
    name: "左滑",
    val: "left",
  },
  right: {
    id: 2,
    name: "右滑",
    val: "right",
  },
  up: {
    id: 3,
    name: "上滑",
    val: "up",
  },
  down: {
    id: 4,
    name: "下滑",
    val: "down",
  },
});
// 發(fā)送事件
const emits = defineEmits(["change"]);
  • 滑動(dòng)方法定義
// 滑動(dòng)開始
function handlerStart(e) {
  let { clientX, clientY } = e.changedTouches[0];
  touchInfo.touchX = clientX;
  touchInfo.touchY = clientY;
}
// 滑動(dòng)結(jié)束
function handlerEnd(e) {
  let { clientX, clientY } = e.changedTouches[0];
  let diffX = clientX - touchInfo.touchX,
    diffY = clientY - touchInfo.touchY,
    absDiffX = Math.abs(diffX),
    absDiffY = Math.abs(diffY),
    type = "";
  if (absDiffX > 50 && absDiffX > absDiffY) {
    type = diffX >= 0 ? "right" : "left";
  }
  if (absDiffY > 50 && absDiffX < absDiffY) {
    type = diffY < 0 ? "up" : "down";
  }
  if (type) {
    console.log("滑動(dòng)信息：", touchTypes[type]);
    emits("change", touchTypes[type]);
  }
}

實(shí)戰(zhàn)演練

寫好滑動(dòng)組件后，可以在 H5 、小程序和 App 里面使用了，下面是頁面模板和腳本使用方法。

模板使用

<q-swiper @change="changeSwiper">
  <template v-slot:content>
    <view class="swiper-box"> 滑動(dòng)方向：{{ swiperDir.name }} </view>
    <view
      :class="{'swiper-section': true, [swiperDir.val != 'click' ? swiperDir.val : '']: true}"></view>
  </template>
</q-swiper>

樣式編寫

.swiper-box {
  padding: 30rpx;
  font-size: 24rpx;
}
.swiper-section {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #f99;
  opacity: 0.8;
  transition: all 0.5s;
  &.up {
    transform: translateX(0) translateY(-100%);
  }
  &.down {
    transform: translateX(0) translateY(0);
  }
  &.left {
    transform: translateX(0) translateY(0);
  }
  &.right {
    transform: translateX(100%) translateY(0);
  }
}

腳本使用

鼠標(biāo)或手指上下左右滑動(dòng)頁面，調(diào)用下面方法進(jìn)行滑動(dòng)。

  • 定義數(shù)據(jù)
// 導(dǎo)入依賴
import { reactive } from "vue";
// 滑動(dòng)方向
let swiperDir = reactive({
  name: "左滑",
  val: "left",
});
  • 方法調(diào)用
// 監(jiān)聽事件
function changeSwiper(dir) {
  swiperDir.name = dir.name;
  swiperDir.val = dir.val;
}

案例展示

  • h5 端效果

  • 小程序端效果

  • APP 端效果

最后

以上就是自定義滑動(dòng)觸摸組件的主要內(nèi)容，更多關(guān)于uniapp項(xiàng)目實(shí)踐自定義滑動(dòng)觸摸組件的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

相關(guān)文章

最新評(píng)論