×

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

作者:Terry2018.09.17来源:Web前端之家浏览:63060评论: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人参与

发表评论: