用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

微客吧 首页 教程 微信小程序 新手教程 查看内容

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

纸飞机 2018-3-8 09:33

分享者:yonggeit,来自原文地址一:小程序request接口的封装小程序request接口的封装(本质上是对request回调函数再次回调)module.exports.getData = function (url) { var data = arguments.length > 1 && argum ...

分享者:yonggeit,来自

原文地址

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

  1. module.exports.getData = function (url) {
  2. var data = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
  3. var method = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'POST';
  4. var header = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' };
  5. return new Promise(function (resolve, reject) {
  6. wx.request({
  7. url: url,
  8. data: data,
  9. method: method,
  10. header: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' },
  11. success: function (res) {
  12. resolve(res)
  13. },
  14. fail: function (res) {
  15. reject(res)
  16. }
  17. })
  18. })
  19. }

调用方法

  1. var common = require("../../common/common.js")
  2. common.getData(postUrl)
  3. .then(function(data){
  4. this.setData({
  5. //....
  6. });
  7. console.log(data);
  8. });

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

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

  1. class="tags">
  2. class="tag-title">标签
  3. class="tag-box">
  4. wx:for="{{tags}}" wx:key="id" wx:for-index="i">
  5. class="tags-item {{currentItem==item.id?'active-tag':''}}" data-id="{{item.id}}" bindtap="tagChoose">{{item.name}}

js文件:

  1. tagChoose:function(options){
  2. var that = this
  3. var id = options.currentTarget.dataset.id;
  4. console.log(id)
  5. //设置当前样式
  6. that.setData({
  7. 'currentItem':id
  8. })
  9. }

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

鲜花
鲜花
握手
握手
雷人
雷人
路过
路过
鸡蛋
鸡蛋
分享至 : QQ空间
收藏