广告
返回顶部
首页 > 资讯 > 精选 >微信小程序如何切换当前页面
  • 451
分享到

微信小程序如何切换当前页面

2024-04-02 19:04:59 451人浏览 八月长安
摘要

微信小程序通过左右滑动切换当前页面,实现方法:在wxml文件中绑定事件,代码:<view class="container" bindtouchstart="touchStart&qu

微信小程序如何切换当前页面

微信小程序通过左右滑动切换当前页面,实现方法:

在wxml文件中绑定事件,代码:

<view class="container" bindtouchstart="touchStart" bindtouchmove="touchMove" bindtouchend="touchEnd">

  // do something

</view>

js文件中处理左右滑动逻辑,代码:

var touchDot = 0;//触摸时的原点

var time = 0;//  时间记录,用于滑动时且时间小于1s则执行左右滑动

var interval = "";// 记录/清理 时间记录

var nth = 0;// 设置活动菜单的index

var nthMax = 5;//活动菜单的最大个数

var tmpFlag = true;// 判断左右华东超出菜单最大值时不再执行滑动事件

// 触摸开始事件

touchStart:function(e){ 

   touchDot = e.touches[0].pageX; // 获取触摸时的原点

   // 使用js计时器记录时间    

   interval = setInterval(function(){

       time++;

   },100); 

},

// 触摸移动事件

touchMove:function(e){ 

   var touchMove = e.touches[0].pageX;

   console.log("touchMove:"+touchMove+" touchDot:"+touchDot+" diff:"+(touchMove - touchDot));

   // 向左滑动   

   if(touchMove - touchDot <= -40 && time < 10){

       if(tmpFlag && nth < nthMax){ //每次移动中且滑动时不超过最大值 只执行一次

           var tmp = this.data.menu.map(function (arr, index) {

               tmpFlag = false;

               if(arr.active){ // 当前的状态更改

                   nth = index;

                   ++nth;

                   arr.active = nth > nthMax ? true : false;

               }

               if(nth == index){ // 下一个的状态更改

                   arr.active = true;

                   name = arr.value;

               }

               return arr;

            })

           this.getNews(name); // 获取新闻列表

           this.setData({menu : tmp}); // 更新菜单

       }

   }

   // 向右滑动

   if(touchMove - touchDot >= 40 && time < 10){

       if(tmpFlag && nth > 0){

           nth = --nth < 0 ? 0 : nth;

           var tmp = this.data.menu.map(function (arr, index) {

               tmpFlag = false;

               arr.active = false;

               // 上一个的状态更改

               if(nth == index){

                   arr.active = true;

                   name = arr.value;

               }

               return arr;

           })

           this.getNews(name); // 获取新闻列表

           this.setData({menu : tmp}); // 更新菜单

       }

   }

   // touchDot = touchMove; //每移动一次把上一次的点作为原点(好像没啥用)

},

 // 触摸结束事件

touchEnd:function(e){

   clearInterval(interval); // 清除setInterval

   time = 0;

   tmpFlag = true; // 回复滑动事件

},

--结束END--

本文标题: 微信小程序如何切换当前页面

本文链接: https://www.lsjlt.com/news/112265.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • 微信小程序如何切换当前页面
    微信小程序通过左右滑动切换当前页面,实现方法:在wxml文件中绑定事件,代码:<view class="container" bindtouchstart="touchStart&qu...
    99+
    2022-10-05
  • 微信小程序如何清空当前页面数据
    微信小程序清空当前页面数据的案例:在wmxl文件添加以下代码。<form bindreset='changeReset'>    <input n...
    99+
    2022-10-06
  • 微信小程序如何设置刷新当前页面
    使用this.onShow()函数实现刷新当前页面首先,进入微信开发者工具,打开小程序文件目录;在文件目录中,依次查找:utils/app.json文件;最后,在app.js中,定义一个全局变量Flag,默认值为false,再调用接口获取数...
    99+
    2022-10-03
  • 微信小程序如何切换下一个页面
    微信小程序切换下一个页面的方法:wxml页面组件跳转,可以通过设置open-type属性指明页面跳转,代码:// navigator 组件默认的 open-type 为 navigate 跳转到新页面// redirect 对应 API 中...
    99+
    2022-10-16
  • 微信小程序怎么传参给当前页面
    微信小程序传参给当前页面的方法:用 navigator标签传值或 wx.navigator。<navigator class="hotCateColumn" url="../detai...
    99+
    2022-10-21
  • 微信小程序实现tab页面切换效果
    本文实例为大家分享了微信小程序实现tab页面切换的具体代码,供大家参考,具体内容如下 html 页面 <view class="bgwhite">     <sc...
    99+
    2022-11-13
  • uni-app 微信小程序 保存当前页面为图片
    由于在微信小程序环境下面没法获取dom,很多方法都很难去实现保存html结构的页面,比较有效的#painter 可以不需要操作dom,但是那玩意儿和重新用js写个页面一样,简单的页面还好,复杂的,元素比较多的就很麻烦,所以考虑用webvie...
    99+
    2023-09-13
    微信小程序 uni-app 小程序 vue.js Powered by 金山文档
  • 微信小程序如何监听手势滑动切换页面
    这篇文章给大家分享的是有关微信小程序如何监听手势滑动切换页面的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。微信小程序 监听手势滑动切换页面实例详解1.对应的xml里写上手势开始、...
    99+
    2022-10-19
  • 微信小程序如何设置页面转换
    微信小程序中实现页面转换的几种方法wx.navigateTo()方法wx.navigateTo({url: '跳转的页面地址'})wx.redirectTo()方法wx.redirectTo({url: '跳转的页面地址'})wx.swit...
    99+
    2022-10-25
  • 微信小程序开发中如何动态设置当前页面的标题
    这篇“微信小程序开发中如何动态设置当前页面的标题”文章,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要参考一下,对于“微信小程序开发中如何动态设置当前页面的标题”,小编整理了以下知识点,请大家跟着小编的步伐一步一步的...
    99+
    2023-06-26
  • 小程序如何获取当前页面URL
    本篇内容介绍了“小程序如何获取当前页面URL”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!使用getCurrentPages可以获取当前加载...
    99+
    2023-06-26
  • 微信小程序中如何实现左右滑动切换页面功能
    这篇文章主要为大家展示了“微信小程序中如何实现左右滑动切换页面功能”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“微信小程序中如何实现左右滑动切换页面功能”这篇文...
    99+
    2022-10-19
  • uniapp微信小程序切换到tabber页面没有自动刷新
    前言 通过uni.switchTab跳转到tabber页面比如个人中心页面,更新的数据没有刷新。导致页面的数据还是修改之前的 解决方法 在uni.switchTab()加入回调函数; uni.swit...
    99+
    2023-08-31
    微信小程序 uni-app 小程序
  • 小程序如何实现关闭当前页面
    这篇“小程序如何实现关闭当前页面”除了程序员外大部分人都不太理解,今天小编为了让大家更加理解“小程序如何实现关闭当前页面”,给大家总结了以下内容,具有一定借鉴价值,内容详细步骤清晰,细节处理妥当,希望大家通过这篇文章有所收获,下面让我们一起...
    99+
    2023-06-26
  • 小程序如何获取当前页面的id
    小程序获取当前页面id的案例:.wxml文件代码:          <block wx:for-items="{...
    99+
    2022-10-13
  • 小程序如何关闭当前页面返回上一页面
    这篇“小程序如何关闭当前页面返回上一页面”文章,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要参考一下,对于“小程序如何关闭当前页面返回上一页面”,小编整理了以下知识点,请大家跟着小编的步伐一步一步的慢慢理解,接下来...
    99+
    2023-06-26
  • 【微信小程序】认识小程序页面
    ✅作者简介:大家好我是hacker707,大家可以叫我hacker,新星计划第三季python赛道Top1🏆 📃个人主页:hacker707的csdn博客 ...
    99+
    2023-09-06
    微信小程序 javascript
  • 小程序tab实现页面切换
    本文实例为大家分享了小程序tab实现页面切换的具体代码,供大家参考,具体内容如下 .wxml <view class='title'>       <view c...
    99+
    2022-11-13
  • 微信小程序如何实现tab切换效果
    这篇文章将为大家详细讲解有关微信小程序如何实现tab切换效果,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。微信小程序之tab切换效果,如图:最近在学习微信小程序并把之前的...
    99+
    2022-10-19
  • 微信小程序页面如何跳回主页
    微信小程序页面跳回主页的方法:微信小程序页面跳转是通过navigator来实现的,而navigator是通过它的属性open-type的合法值,因此在wxml页面中设置open-type的合法值来选择跳转方式。<navigator&n...
    99+
    2022-10-25
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作