搜索 登录注册
×

热门关键词：Web前端|前端开发|HTML5|CSS3|jQuery|CSS3动画

关于微信小程序点击事件的一些事

作者：Terry2018.09.17来源：Web前端之家浏览：65160评论:0
关键词：小程序微信小程序点击

500.jpg

在开始分享“微信小程序点击事件”之前，必须要吐糟下。

2018年9月16日，永远会记住这一天，经历了人生的最大台风“山竹”（12级+），呆在家里，感觉房子都在晃动，听到外面鬼谷狼嚎的风叫声，心慌之时带上耳机，在客厅打地铺，蒙头大睡，醒来发现昂还在，突然感悟：活着真好，且活且珍惜，😄。

TIM图片20180917102737.jpg

次日，风已去，雨还在，从家到公司，发现深圳已成为一座“废墟”城，到处都是垃圾，难行走。虽然环境恶劣，上班照常(很多公司今天放假)，工作还得做，文章还得继续写，为啥？穷呗。

OK，还是回归正题吧，前段时间有一些网友问到微信小程序里一些问题，其中有个是关于模拟JS中点击事件的，如何去实现。我在这里总结了一些“小程序”常用的点击事件应用，一共分为四种，接下来我们逐个分析。

一、点击选中

点击事件应用，这个是最基本的交互，看一个最简单的实例：默认和点击后的状态。

默认：

图片.png

点击后

图片.png

这个在平时的前端交互中，实现起来很简单；但是在微信小程序里，思路是一样的，只是换了一种形式。

WXML代码：

  1. <view class='dati-l-item {{currentTab == 0 ? "stadus" : ""}}' data-current='0' id='A' bindtap="disp"><icon></icon>6月18日</view>

这里估计难理解就是{{currentTab == 0 ? "stadus" : ""}}，其实就是两种状态，一种是点击后，我们添加一个样式名stadus，另外一种就是默认的，我们通过stadus去控制点击后的样式。

然后就是bindtap="disp"，这个其实就是给这个按钮绑定一个disp事件。

JS代码：

我们先在data里面定义下：

  1. Page({
  2.   data{
  3.    stadus:''
  4.   }
  5. })

然后给disp事件赋予一些方法，如下：

  1. disp: function (e){
  2.     let this = that;
  3.     if(xxx){
  4.         that.setData({
  5.             currentTab: e.currentTarget.dataset.current
  6.         })    
  7.     }
  8. }

点击后，给currentTab赋值空或者stadus。

这里我也想补充下，因为我最近做了一个答题的小游戏，就是点击后，外面需要自动跳转到下一题，但是需要停顿下后再跳转，实现方法很简单，就是在上面的方法上，再添加一个跳转的方法，然后设置一个定时器。代码如下：

  1. disp: function (e){
  2.     let this = that;
  3.     if(xxx){
  4.         that.setData({
  5.             currentTab: e.currentTarget.dataset.current
  6.         })    
  7.     }
  8.  
  9.     // time
  10.     setTimeout(function () {
  11.         that.refresh();
  12.       }, 500) 
  13. }

说明：就是点击选中后，0.5S后，直接跳转到下一题，这样是最理想的状态。

二、点击弹出收起模拟JQ中的toggle()

我们知道，jQuery中实现点击弹出收起，最基本的方法就是toggle()，那么在微信小程序里，如何去实现呢，还是拿最近做的一个小程序案例来分析，更简便，易理解。

图片.png

这是一些默认状态（收起），点击后可以展开内容和收起，然后箭头变化。

图片.png

方法跟上面提到的有些类似，只是复杂了些，首先来看下wxml：

  1. <view class="guzhi-item {{statusArr[0] ? 'vshow' : 'vhide'}}">
  2.    <view class='guzhi-tt' data-index="0" bindtap="bindViewTap"><text class='bold'>SP500</text><text class='dian'></text>标普500</view>
  3.    <view class="guzhi-down m20 dn">标准普尔500指数是记录美国500家上市公司的一个股票指数，这个股票指数由标准普尔公司创建并维护</view>
  4. </view>

这个不去解释了，大家一看就很清楚啦。

JS代码：

  1. Page({
  2.   data: {
  3.     statusArr:false
  4.   },
  5.   
  6.   bindViewTap: function (e) {
  7.     let that = this,
  8.        idx = e.target.dataset.index,
  9.        updateStatusArr = that.data.statusArr.slice(0); //复制新数组
  10.     updateStatusArr[idx] = !that.data.statusArr[idx];
  11.     that.setData({
  12.       'statusArr': updateStatusArr
  13.     });
  14.   }
  15. })

说明：点击后给statusArr赋值。

如果我们是多个的话，如何去实现呢，比如上面有5条，我们可以去定义一个数组：

  1. statusArr: [false, false, false, false, false]//假设有5个，这个可根据返回的数据个数进行赋值

wxml:

  1. <view class="guzhi-item {{statusArr[0] ? 'vshow' : 'vhide'}}">
  2.         <view class='guzhi-tt' data-index="0" bindtap="bindViewTap"><text class='bold'>SP500</text><text class='dian'></text>标普500</view>
  3.         <view class="guzhi-down m20 dn">标准普尔500指数是记录美国500家上市公司的一个股票指数，这个股票指数由标准普尔公司创建并维护</view>
  4.       </view>
  5.  
  6.       <view class="guzhi-item m30 {{statusArr[1] ? 'vshow' : 'vhide'}}">
  7.         <view class='guzhi-tt' data-index="1" bindtap="bindViewTap"><text class='bold'>DJ30</text><text class='dian'></text>道琼斯30</view>
  8.         <view class="guzhi-down m20 dn">道琼斯指数，是一种算术平均股份指数，是目前世界上历史最为悠久的股票指数。</view>
  9.       </view>
  10.  
  11.       <view class="guzhi-item m30 {{statusArr[2] ? 'vshow' : 'vhide'}}">
  12.         <view class='guzhi-tt' data-index="2" bindtap="bindViewTap"><text class='bold'>CHINA300</text><text class='dian'></text>中华300指数</view>
  13.         <view class="guzhi-down m20 dn">是由上海和深圳证券交易市场中选取300只A股作为样本，覆盖沪深市场六成左右的市值</view>
  14.       </view>
  15.  
  16.       <view class="guzhi-item m30 {{statusArr[3] ? 'vshow' : 'vhide'}}">
  17.         <view class='guzhi-tt' data-index="3" bindtap="bindViewTap"><text class='bold'>TECH100</text><text class='dian'></text>纳斯达克100</view>
  18.         <view class="guzhi-down m20 dn">全球最大的证券交易市场，反映纳斯达克证券市场行情变化的股票价格平均指数，基本指数为100</view>
  19.       </view>
  20.  
  21.       <view class="guzhi-item m30 {{statusArr[4] ? 'vshow' : 'vhide'}}">
  22.         <view class='guzhi-tt' data-index="4" bindtap="bindViewTap"><text class='bold'>JPN225</text><text class='dian'></text>日经指数225</view>
  23.         <view class="guzhi-down m20 dn">经济平均指数，简称日经平均指数NIKKEI225，是东京证券交易所交易的225品种的股份指数。</view>
  24.       </view>
  25.       
  26.       <view class="guzhi-item m30 {{statusArr[5] ? 'vshow' : 'vhide'}}">
  27.         <view class='guzhi-tt' data-index="5" bindtap="bindViewTap"><text class='bold'>HK50</text><text class='dian'></text>港股50</view>
  28.         <view class="guzhi-down m20 dn">是香港蓝筹股变化的指标，亦是亚洲区广受注目的指数</view>
  29.       </view>

完整JS代码：

  1. Page({
  2.   data: {
  3.     statusArr: [false, false, false, false, false]//假设有5个，这个可根据返回的数据个数进行赋值 
  4.   },
  5.   
  6.   bindViewTap: function (e) {
  7.     let that = this,
  8.         idx = e.target.dataset.index,
  9.         updateStatusArr = that.data.statusArr.slice(0); //复制新数组
  10.     updateStatusArr[idx] = !that.data.statusArr[idx];
  11.     that.setData({
  12.       'statusArr': updateStatusArr
  13.     });
  14.   }
  15. })

说明：用数组去处理，就很简单了，这个只是一个案例；如果我们去处理其他的多条数据交互，可以类似处理。

如果我们想每次只能有一个展开的效果，我们可以去做些判断即可，这里就不啰嗦了，不懂的话，加QQ群咨询。

具体的效果，大家可以去微信开发工具里弄个DEMO测试下。

三、点击实现TAB选项卡切换功能

在微信里实现TAB切换，跟上面介绍的方法类似，为了实现动画效果，我们一般都会结合官方自带的swiper去实现。比如我们要实现3个tab切换内容，一起来了解下：

wxml

  1. <view class="swiper-tab">
  2.     <view class="swiper-tab-item {{currentTab==0?'active':''}}" data-current="0" bindtap="clickTab">Web前端之家</view>
  3.     <view class="swiper-tab-item {{currentTab==1?'active':''}}" data-current="1" bindtap="clickTab">前端工具</view>
  4.     <view class="swiper-tab-item {{currentTab==2?'active':''}}" data-current="2" bindtap="clickTab">小程序</view>
  5. </view>
  6.  
  7. <swiper current="{{currentTab}}" duration="300"  bindchange="swiperTab">
  8.     <swiper-item ><view>Web前端之家 - 内容</view></swiper-item>
  9.     <swiper-item><view>前端工具 - 内容</view></swiper-item>
  10.     <swiper-item><view>小程序 - 内容</view></swiper-item>
  11. </swiper>

这个框架是不是很眼熟，跟html很类似，不用多介绍吧。

关键是JS代码的写法。如下：

  1. Page({
  2.   data: {
  3.     currentTab: 0
  4.   },
  5.   
  6.   //滑动切换
  7.   swiperTab: function (e) {
  8.     var that = this;
  9.     that.setData({
  10.       currentTab: e.detail.current
  11.     });
  12.   },
  13.   
  14.   //点击切换
  15.   clickTab: function (e) {
  16.     var that = this;
  17.     if (this.data.currentTab === e.target.dataset.current) {
  18.       return false;
  19.     } else {
  20.       that.setData({
  21.         currentTab: e.target.dataset.current
  22.       })
  23.     }
  24.   }
  25. })

相对于上面介绍的二种点击方法，它多了个判断this.data.currentTab === e.target.dataset.current，当点击tab跟内容相匹配的时候，会执行相应的动作。

四、点击弹出层

点击弹出相关内容层，官方会固定一个模板，我们一般很少去用它，因为太丑了，所以我们需要自定义，如何去实现呢？

首先我们看下官方的JS模板：

  1. wx.showModal({
  2.   title: '提示',
  3.   content: '这是一个模态弹窗',
  4.   success: function(res) {
  5.     if (res.confirm) {
  6.       console.log('用户点击确定')
  7.     } else if (res.cancel) {
  8.       console.log('用户点击取消')
  9.     }
  10.   }
  11. })

我们可以给某个按钮绑定一个事件，然后去执行这个弹出的内容。如果要自定义的话，一起学习下吧。

写段wxml

  1. <button type="default" bindtap="toastShow">点击弹出toast</button>
  2. <toast hidden="{{status}}" duration="3000" bindchange="toastHide">
  3.         这是toast
  4. </toast>
  5. <view class="myStyle">这是status的值:{{status}}</view>：

JS代码

  1. Page({
  2.   data:{
  3.       status:status　　　　　　　　　　　　//data里面的属性可以传递到视图
  4.   },
  5.   
  6.   //点击弹出
  7.   toastShow: function(event) {
  8.     console.log("触发了点击事件，弹出toast")
  9.     status = false
  10.     this.setData({status:status})　　　　//setData方法可以建立新的data属性，从而起到跟视图实时同步的效果
  11.   },
  12.     
  13.   //点击关闭
  14.   toastHide:function(event){
  15.       console.log("触发bindchange，隐藏toast")
  16.       status =true
  17.       this.setData({status:status})
  18.   }
  19.   
  20. })

说明：弹出、关闭的原理跟我们日常写的JS基本一样，通过toastShow和toastHide两个函数来实现，当给stadus复制为true的是时候关闭，false的时候弹出，是不是很简单呢。

这里我想提个问题，如果弹出层跟canvas一起用的时候，你会发现弹出层会永远都是在canvas下，无论怎么去设置zindex都无用，如何去处理呢？

.....

这个坑的确很深，为了让大家能够不踩，这里直接分享下：

我们可以用cover-view来代替view的弹出层。这样就可以了，虽然实现了“弹出层在canvas上”的效果，但是问题又来了，如果想把关闭按钮放到弹出层外面的话，又不行了，为什么会出现这样的问题？

因为cover-view自带overflow:hidden属性，并且你无法改变，这个真的要吐槽下小程序组件了，所以遇到这种问题，我们不能嵌套了，只能把关闭和层分开，并行处理。

OK，貌似点击的事件应用基本就这些了，至于其他复杂的，都是从这些衍生出去的。

总结

本次分享，也是近些日做的一些项目经验总结，其实微信小程序坑还有很多，后面会慢慢分享。对于一个小程序开发的新手，应该多去踩踩，这样你才会进步，只有踩过的，才会记忆犹新，难道不是吗？

最后希望大家能加入我们QQ群，也可以关注我们的微信公众号，可以了解最新的动态和咨询。

赏您的支持是我们创作的动力！
温馨提示：本文作者系Terry ，经Web前端之家编辑修改或补充，转载请注明出处和本文链接：
https://jiangweishan.com/article/weixinxcx20180917.html

网友评论文明上网理性发言 已有0人参与

发表评论:

相关文章