微信小程序——js事件

一、点击事件 bindtap

<view class="bottom">
  <button bindtap="addCart">加入购物车</button>
  <!-- 事件传参，参数名buy，值'true' -->
  <button bindtap="addCart" data-buy="true">立即购买</button>
</view>

获取传参：e.currentTarget.dataset
读取本地存储：wx.getStorageSync(“cartList”)
设置本地存储：wx.setStorageSync(“cartList”, productList);
跳转tab：wx.switchTab
弹出模态框：wx.showModal

  addCart:function(e){
    // 获取参数名为buy的参数，判断是否跳转购物车
    var isGoCart = e.currentTarget.dataset.buy;

    // 获取、存入localstorage
    var productList = wx.getStorageSync("cartList");
    if(!productList){
      productList=[];
    }
    productList.push(this.data.productId);
    wx.setStorageSync("cartList", productList);

    // 判断是否跳转至购物车
    if(isGoCart){
      wx.switchTab({
        url: '/pages/cart/cart',
      })
    }else{
      wx.showModal({
        title: '购物车提示',
        content: '成功添加至购物车',
      })
    }
  },

二、checkbox事件 bindchange

bindchange：checkbox-group内部checkbox改变时触发

<scroll-view scroll-y>
  <view wx:for="{{productList}}" wx:key="index" class="product">
    <!-- bindchange 内部checkbox改变时触发 -->
    <checkbox-group id="{{item.id}}" bindchange="handleChange">
      <checkbox value="{{item.id}}"></checkbox>
    </checkbox-group>
  </view>
</scroll-view>

  // 处理checkbox状态的改变
  handleChange:function(e){
    // 获取checkbox-group中的id属性
    var productId = e.currentTarget.id;
    // 获取checkbox的值，未选中时为undefined
    var status = e.detail.value[0];
    。。。 。。。

三、失去焦点事件 bindblur

<input placeholder="请输入手机号" type="number" bindblur="getPhone"></input>

  getPhone:function(e){
    this.setData({
      // 获取input框的值
      phone: e.detail.value
    })
  },

四、api请求

调用api： wx.request

  // 调用接口，获取导航栏信息
  getNavList:function(){
    var that=this;
    wx.request({
      url: 'http://www.hengyishun.cn/login/navlist',
      success(resp){
        // 这里面使用this指代的是回调函数本身，所以用that指代
        that.setData({
          navList: resp.data
        })
      }
    })
  },

  /* 生命周期函数--监听页面加载 */
  onLoad: function (options) {
    this.getNavList();
  },

五、弹窗

wx.showToast

  success(resp){
    if(resp.data[0]=="true"){
      // 登陆成功，通过tab跳转
      wx.switchTab({
        url: '/pages/index/index',
      })
      // 弹出提示信息
      wx.showToast({
        title: '登陆成功',
      })
    }else{
      wx.showToast({
        title: '验证码错误',
        // icon 类型仅支持loading和success，默认为success
        // icon: 'loading'
        // image属性可以支持自定义图标
        image: '/images/select.png'
      })
    }
  }

参考：https://www.bilibili.com/video/av70298792

来源：CSDN

作者：空中追风sk

链接：https://blog.csdn.net/weixin_43667990/article/details/104165490