小程序request接口的封装，实现给循环列表添加点击样式

小程序request接口的封装" style="margin: 20px 0px; font-family: 'PingFang SC', 'Hiragino Sans GB', 'Helvetica Neue', 'Microsoft Yahei', 'WenQuanYi Micro Hei', sans-serif; font-weight: 500; line-height: 40px; color: rgb(44, 62, 80); text-rendering: optimizeLegibility; font-size: 21px; background-color: rgb(249, 249, 245);">一：小程序request接口的封装

小程序request接口的封装(本质上是对request回调函数再次回调)

module.exports.getData = function (url) {
    var data = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
    var method = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'POST';
    var header = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' };
    return new Promise(function (resolve, reject) {
        wx.request({
            url: url,
            data: data,
            method: method,
            header: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' },
            success: function (res) {
                resolve(res)
            },
            fail: function (res) {
                reject(res)
            }
        })
    })
}

调用方法

var common = require("../../common/common.js")
common.getData(postUrl)
        .then(function(data){
          this.setData({
          //....
          });
          console.log(data);
        });

二：实现给循环列表添加点击样式

微信小程序有个属性hover-class=’active’,是指当点击列表元素时当按下鼠标左键会显示active样式,但是鼠标离开样式就会复原.可以参考以下解决方案,直接上代码: 
wxml:

 <view class="tags">
    <view class="tag-title">标签</view>
    <view class="tag-box">
    <view wx:for="{{tags}}" wx:key="id" wx:for-index="i">
      <view class="tags-item {{currentItem==item.id?'active-tag':''}}" data-id="{{item.id}}" bindtap="tagChoose">{{item.name}}</view>
      </view>
    </view>
  </view>

js文件:

  tagChoose:function(options){
    var that = this
     var id = options.currentTarget.dataset.id;
     console.log(id)
    //设置当前样式
    that.setData({
      'currentItem':id
    })
  }

核心点:class=”tags-item {{dateCurrent==item.id?’active-tag’:”}}”模板文件中使用三元运算符,通过dateCurrent指定当前item的id