uni-app 实现 fullpage 组件（适用于微信小程序,h5等）

业务需求。

本文github 源码地址

1.组件 src/components/FullPage/index.vue

<template><view class="full-page-container"><viewclass="full-page-main"@touchstart="handleTouchStart"@touchmove="handleTouchMove"@touchend="handleTouchEnd":style="style"><slot /></view></view>
</template><script>export default {name: 'FullPage',props: {// 触发翻页的临界值critical: {type: Number,default: 50,},// 总共页面数totalPage: {type: Number,required: true,default: 0,},// 当前页面的索引值activeIndex: {type: Number,required: true,default: 0,},},data() {return {pageIndex: 0, // 当前页面的索引值startPageY: 0, // 开始的位置endPageY: 0, // 结束的位置marginTop: 0, // 滑动下拉(上拉)距离}},mounted() {this.pageIndex = this.activeIndex},computed: {style() {return `transform:translateY(-${this.pageIndex * 100}%);margin-top:${this.marginTop}px`},},watch: {activeIndex(value) {this.pageIndex = value},},methods: {// 开始滑动handleTouchStart(e) {const { pageY } = e.touches[0]this.startPageY = pageY},// 滑动中handleTouchMove(e) {const { pageY } = e.touches[0]if (pageY - this.startPageY < this.critical &&pageY - this.startPageY > -this.critical) {this.marginTop = pageY - this.startPageY}this.endPageY = pageY},// 滑动结束handleTouchEnd() {if (!this.endPageY) {return}if (this.endPageY - this.startPageY > this.critical &&this.pageIndex > 0) {this.pageIndex -= 1} else if (this.endPageY - this.startPageY < -this.critical &&this.pageIndex < this.totalPage - 1) {this.pageIndex += 1}this.$emit('update:activeIndex', this.pageIndex)this.startPageY = 0this.endPageY = 0this.marginTop = 0},},}
</script><style lang="scss" scoped>.full-page-container {height: 100%;overflow: hidden;.full-page-main {height: 100%;transition: all 0.3s;}}
</style>

2.使用 /src/pages/index/index.vue

<template><full-page :active-index.sync="activeIndex" :total-page="totalPage"><viewclass="section"v-for="(item, index) in totalPage":key="index":style="getRandomStyle()"><div :class="'page page-' + index">{{ index + 1 }}<button type="primary" @click="toPage(1)">跳转到第1页</button><button type="primary" @click="toPage(10)">跳转到第10页</button></div></view></full-page>
</template><script>import FullPage from '@/components/FullPage'export default {components: {FullPage,},data() {return {totalPage: 10,activeIndex: 0,}},methods: {getRandomStyle() {const r = Math.floor(Math.random() * 256)const g = Math.floor(Math.random() * 256)const b = Math.floor(Math.random() * 256)const color = '#' + r.toString(16) + g.toString(16) + b.toString(16)return `background-color:${color}`},toPage(index) {this.activeIndex = index - 1},},}
</script>
<style lang="scss" scoped>page {height: 100%;}.section {height: 100%;width: 100%;position: relative;}.page {height: 100%;width: 100%;text-align: center;font-size: 50rpx;padding-top: 150rpx;box-sizing: border-box;}button {font-size: 30rpx;width: 400rpx;margin: 50rpx;}
</style>

3.实现效果

参考链接

1.https://github.com/rongj/wechatapp-fullpage-scroll

uni-app 实现 fullpage 组件（适用于微信小程序,h5等）相关推荐

PHP开发B2C商城微信小程序商城系统源码+数据库，轻量级前后端分离的电商系统，支持微信小程序 + H5+ 公众号 + APP
项目介绍一款轻量级.高性能.前后端分离的电商系统,支持微信小程序 + H5+ 公众号 + APP,前后端源码完全开源,看见及所得,完美支持二次开发,可学习可商用,让您快速搭建个性化独立商城. 完整代 ...
taro+vue3 搭建一套框架，适用于微信小程序和H5
这里写taro+vue3 搭建一套框架,适用于微信小程序和H5 Taro+Vue3 搭建适用于微信小程序和 H5 的框架的大致步骤: Taro+Vue3 搭建适用于微信小程序和 H5 的框架的大致步骤 ...
小程序 text decode 真机无效_【移动端测试】APP自动化测试案例2：微信小程序自动化测试...
APP自动化测试之案例:微信小程序自动化测试 1.前提基于win10专业版64位系统+jdk1.8+python3+pycharm+android SDK+appium+unittest. 2.痛点 ...
微信小程序/H5(UniApp)导入/导出excel文件
微信小程序/H5本地读写excel 准备工作 JS库本地导入并读取Excel(*.xls, *.xlsx) Excel文件示例选取文件并获得binary数据 Binary数据转json 本地构建并 ...
【重磅】App内可直接打开微信小程序，新增内容安全接口等
今晚,微信又公布了几项微信小程序新能力: 微信小程序上线App直接打开小程序功能内容安全接口.插件详情页等多种能力接连更新上线一.App直接打开小程序之前微信已经开放过相关能力,可以实现App和 ...
Android 自有App内部跳转到微信小程序的方法
1.在 build.gradle 文件中,添加如下依赖即可: dependencies {implementation 'com.tencent.mm.opensdk:wechat-sdk-andro ...
小程序组件onload_微信小程序自定义组件(一)
好吧,突然发现学不完了,一下子,那就分开吧,由于时间太久,直接重新大致复习了一下微信小程序自定义组件微信小程序支持自定义组件下方的目录其中,components为组件目录,nodemodule ...
小程序组件onload_微信小程序自定义组件踩坑教程
微信小程序不支持自定义组件,只提供了一个非常受限制的模板功能,尤其缺乏了开发产品中最重要的几个功能:模板内的数据只能由当前页面传递,无法预先设置一些初始化数据以达到复用的目的: 模板内的数据变化无法通 ...
如何获取当前地址以及天气温度情况，适用于微信小程序（端午假期将至，祝愿大家端午快乐）
我的需求:获取当前地址,温度和天气[微信小程序] 先获取当前经纬度uni.getLocation 获取经纬度以后,通过经纬度进行逆地理编码,获取当前定位地址uni.request 处理显示[" ...

uni-app 实现 fullpage 组件（适用于微信小程序,h5等）

uni-app 实现 fullpage 组件（适用于微信小程序,h5等）

uni-app 实现 fullpage 组件（适用于微信小程序,h5等）相关推荐

最新文章

热门文章