搜索 登录注册
×

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

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

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

500.jpg

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

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

TIM图片20180917102737.jpg

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

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

一、点击选中

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

默认：

图片.png

点击后

图片.png

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

WXML代码：

<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里面定义下：

Page({
  data{
   stadus:''
  }
})

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

disp: function (e){
    let this = that;
    if(xxx){
        that.setData({
            currentTab: e.currentTarget.dataset.current
        })    
    }
}

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

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

disp: function (e){
    let this = that;
    if(xxx){
        that.setData({
            currentTab: e.currentTarget.dataset.current
        })    
    }

    // time
    setTimeout(function () {
        that.refresh();
      }, 500) 
}

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

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

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

图片.png

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

图片.png

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

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

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

JS代码：

Page({
  data: {
    statusArr:false
  },
  
  bindViewTap: function (e) {
    let that = this,
       idx = e.target.dataset.index,
       updateStatusArr = that.data.statusArr.slice(0); //复制新数组
    updateStatusArr[idx] = !that.data.statusArr[idx];
    that.setData({
      'statusArr': updateStatusArr
    });
  }
})

说明：点击后给statusArr赋值。

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

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

wxml:

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

      <view class="guzhi-item m30 {{statusArr[1] ? 'vshow' : 'vhide'}}">
        <view class='guzhi-tt' data-index="1" bindtap="bindViewTap"><text class='bold'>DJ30</text><text class='dian'></text>道琼斯30</view>
        <view class="guzhi-down m20 dn">道琼斯指数，是一种算术平均股份指数，是目前世界上历史最为悠久的股票指数。</view>
      </view>

      <view class="guzhi-item m30 {{statusArr[2] ? 'vshow' : 'vhide'}}">
        <view class='guzhi-tt' data-index="2" bindtap="bindViewTap"><text class='bold'>CHINA300</text><text class='dian'></text>中华300指数</view>
        <view class="guzhi-down m20 dn">是由上海和深圳证券交易市场中选取300只A股作为样本，覆盖沪深市场六成左右的市值</view>
      </view>

      <view class="guzhi-item m30 {{statusArr[3] ? 'vshow' : 'vhide'}}">
        <view class='guzhi-tt' data-index="3" bindtap="bindViewTap"><text class='bold'>TECH100</text><text class='dian'></text>纳斯达克100</view>
        <view class="guzhi-down m20 dn">全球最大的证券交易市场，反映纳斯达克证券市场行情变化的股票价格平均指数，基本指数为100</view>
      </view>

      <view class="guzhi-item m30 {{statusArr[4] ? 'vshow' : 'vhide'}}">
        <view class='guzhi-tt' data-index="4" bindtap="bindViewTap"><text class='bold'>JPN225</text><text class='dian'></text>日经指数225</view>
        <view class="guzhi-down m20 dn">经济平均指数，简称日经平均指数NIKKEI225，是东京证券交易所交易的225品种的股份指数。</view>
      </view>
      
      <view class="guzhi-item m30 {{statusArr[5] ? 'vshow' : 'vhide'}}">
        <view class='guzhi-tt' data-index="5" bindtap="bindViewTap"><text class='bold'>HK50</text><text class='dian'></text>港股50</view>
        <view class="guzhi-down m20 dn">是香港蓝筹股变化的指标，亦是亚洲区广受注目的指数</view>
      </view>

完整JS代码：

Page({
  data: {
    statusArr: [false, false, false, false, false]//假设有5个，这个可根据返回的数据个数进行赋值 
  },
  
  bindViewTap: function (e) {
    let that = this,
        idx = e.target.dataset.index,
        updateStatusArr = that.data.statusArr.slice(0); //复制新数组
    updateStatusArr[idx] = !that.data.statusArr[idx];
    that.setData({
      'statusArr': updateStatusArr
    });
  }
})

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

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

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

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

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

wxml

<view class="swiper-tab">
    <view class="swiper-tab-item {{currentTab==0?'active':''}}" data-current="0" bindtap="clickTab">Web前端之家</view>
    <view class="swiper-tab-item {{currentTab==1?'active':''}}" data-current="1" bindtap="clickTab">前端工具</view>
    <view class="swiper-tab-item {{currentTab==2?'active':''}}" data-current="2" bindtap="clickTab">小程序</view>
</view>

<swiper current="{{currentTab}}" duration="300"  bindchange="swiperTab">
    <swiper-item ><view>Web前端之家 - 内容</view></swiper-item>
    <swiper-item><view>前端工具 - 内容</view></swiper-item>
    <swiper-item><view>小程序 - 内容</view></swiper-item>
</swiper>

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

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

Page({
  data: {
    currentTab: 0
  },
  
  //滑动切换
  swiperTab: function (e) {
    var that = this;
    that.setData({
      currentTab: e.detail.current
    });
  },
  
  //点击切换
  clickTab: function (e) {
    var that = this;
    if (this.data.currentTab === e.target.dataset.current) {
      return false;
    } else {
      that.setData({
        currentTab: e.target.dataset.current
      })
    }
  }
})

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

四、点击弹出层

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

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

wx.showModal({
  title: '提示',
  content: '这是一个模态弹窗',
  success: function(res) {
    if (res.confirm) {
      console.log('用户点击确定')
    } else if (res.cancel) {
      console.log('用户点击取消')
    }
  }
})

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

写段wxml

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

JS代码

Page({
  data:{
      status:status　　　　　　　　　　　　//data里面的属性可以传递到视图
  },
  
  //点击弹出
  toastShow: function(event) {
    console.log("触发了点击事件，弹出toast")
    status = false
    this.setData({status:status})　　　　//setData方法可以建立新的data属性，从而起到跟视图实时同步的效果
  },
    
  //点击关闭
  toastHide:function(event){
      console.log("触发bindchange，隐藏toast")
      status =true
      this.setData({status:status})
  }
  
})

说明：弹出、关闭的原理跟我们日常写的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人参与

发表评论:

相关文章