小程序request接口的封裝，實(shí)現(xiàn)給循環(huán)列表添加點(diǎn)擊樣式
發(fā)布時(shí)間：2018-02-06 15:24 所屬欄目：小程序開(kāi)發(fā)教程
小程序request接口的封裝(本質(zhì)上是對(duì)request回調(diào)函數(shù)再次回調(diào))
-
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) -
} -
}) -
}) -
}
調(diào)用方法
-
var common = require("../../common/common.js") -
common.getData(postUrl) -
.then(function(data){ -
this.setData({ -
//.... -
}); -
console.log(data); -
});
二：實(shí)現(xiàn)給循環(huán)列表添加點(diǎn)擊樣式
微信小程序有個(gè)屬性hover-class=’active’,是指當(dāng)點(diǎn)擊列表元素時(shí)當(dāng)按下鼠標(biāo)左鍵會(huì)顯示active樣式,但是鼠標(biāo)離開(kāi)樣式就會(huì)復(fù)原.可以參考以下解決方案,直接上代碼: wxml:
-
<view class="tags"> -
<view class="tag-title">標(biāo)簽</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) -
//設(shè)置當(dāng)前樣式 -
that.setData({ -
'currentItem':id -
}) -
}
核心點(diǎn):class=”tags-item {{dateCurrent==item.id?’active-tag’:”}}”模板文件中使用三元運(yùn)算符,通過(guò)dateCurrent指定當(dāng)前item的id
易優(yōu)小程序（企業(yè)版）+靈活api+前后代碼開(kāi)源
碼云倉(cāng)庫(kù):
本文地址：http://m.chqfk.com/wxmini/doc/course/21619.html 復(fù)制鏈接
如需定制請(qǐng)聯(lián)系易優(yōu)客服咨詢： 點(diǎn)擊咨詢
