微信小程序开发之列表页面点赞代码(图文)

1688源码 | 2017-10-01 11:18:16 |

微信小程序列表页面点赞代码(图文)

GIF.gif

wxml代码:

<view class="zan{{currentItem==item.id?'active-tag':''}}" bindtap="dig" data-id="{{item.id}}" data-classid="{{item.classid}}" data-isLike="{{item.isLike}}">
<text>{{item.diggtop}}</text>
</ view>

js代码:

dig: function (e) {
    var $data = e.currentTarget.dataset;
    var id=$data.id
    var that=this
    var list=new Array()
    wx.request({
      url: getApp().globalData.URL + '/e/extend/api/index.php?m=piclist&c=dig',
      data:{
        id: $data.id,
        classid: $data.classid
      },
      method:'GET',
      success: function (res) {
        console.log(res.data)
          that.data.list.forEach(item => {
            if (item.id===id) {
              console.log(item.id)
              console.log(id)
              if (res.data.codes==0){
              if(item.islLke){
                item.diggtop--
                }
              else {
                item.diggtop++
                
              }
              }
              else{
              }
              item.isLike = !item.isLike
              console.log(item.isLike)
            }
          })
          that.setData({
            list: that.data.list,
            'currentItem': id
          })
      }
    })

  }

wxss代码:

.zan{
  margin-left: 2px;
  width: 20px;
  background: url('/images/dig.png') no-repeat;
  background-size: 18px 18px
}
.zanactive-tag{
margin-left: 2px;
width: 20px;
  background: url('/images/dig_1.png') no-repeat;
  background-size: 18px 18px;
  color: red;

}
.zanactive-tag text{
  line-height: 20px;
  padding-left: 25px;
  width: 40px;
display: inline-block
}
.zan text{
  line-height: 20px;
  padding-left: 25px
}

精品源码
  • 织梦万能API 百度小程序插件

    惊爆价¥400原价¥800

    立即购买
  • 我爱登报网 百度小程序源码 织梦CMS后台

    惊爆价¥520原价¥1040

    立即购买
  • 索娜根布黑枸杞 百度小程序源码 织梦CMS后台

    惊爆价¥520原价¥1040

    立即购买
视觉焦点

推荐文章

微信小程序插件使用错误cannotread property 'version' of undefined

微信小程序使用ES6构建面向对象的JS代码及访问服务器API获取数据

最新文章

关注我们

微信扫一扫,关注更多精彩

  • 1688源码公众号
    全面掌握源码一手资讯

  • 1688源码公众号
    精彩活动,推送提醒