用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

13

主题

27

帖子

1085

积分

实习版主

Rank: 7Rank: 7Rank: 7

积分
1085
2017-9-1 18:00:23 x837195936原创达人 实习版主 楼主 814997
本帖最后由 x837195936 于 2017-9-2 12:19 编辑
前几日,遇到一位同学咨询我,小程序页面的图文列表(使用wx:for渲染出来的)如何实现点赞某条的效果,特此写了这样一个简单的Demo,今天来分享给大家。

微信小程序渲染的列表信息数据很难从视图层去单独修改某一个列表渲染的数据样式。原因一是无法像WEB开发是直接操作DOM,另一方面部分小程序开发者不了解小程序VIEW层的渲染机制。细节点说明:
1、列表的数据来源于JS,因此在无法操作dom的情况下就只能修改数据(体现数据驱动模式)。
2、使用data-*来存储当前点击的项对应的点赞数量。
3、添加一个额外的hasChanged属性来记录该项是否已经点赞(如果允许一个用户不停点赞,可以取消该属性)。

直接贴代码了。

index.wxml

[HTML] 纯文本查看 复制代码
<view class="container">
  <view class="list" wx:for="{{list}}" wx:key="key" wx:for-item="item" wx:for-index="index">
    <view class="praise {{item.hasChange? 'changed': ''}}" hover-class="hover_praise" bindtap="praiseThis" data-curIndex="{{index}}">{{item.praise}}</view>
    <view class="author">{{item.author}}</view>
    <view class="info">{{item.info}}</view>
  </view>
</view>


index.wxss

[CSS] 纯文本查看 复制代码
.container {
  background: #fff;
  height: 100%;
  font-family: 'Miscrsoft YaHei'
}

.list {
  background: #ddd;
  position: relative;
  padding: 10px 10px 10px 70px;
  height: 50px;
  margin-bottom: 10px;
}

.praise {
  width: 50px;
  height: 50px;
  background: #999;
  text-align: center;
  line-height: 50px;
  border-radius: 50%;
  position: absolute;
  left: 10px;
  transition: 0.5s;
  color: #fff;
}

.hover_praise, .changed {
  transition: 0.5s;
  background: #f5d;
}

.author {
  display: block;
  height: 20px;
}

.info {
  height: 30px;
  line-height: 30px;
  font-size: 12px;
}


index.js

[JavaScript] 纯文本查看 复制代码
const app = getApp()

Page({
  data: {

  },
  onLoad: function () {
    this.list = [{
      'author': 'xiongcf',
      'info': 'just for example praise list item.',
      'praise': 0,
      'hasChange': false
    },
    {
      'author': 'xiongcc',
      'info': 'just for example praise list item.',
      'praise': 133,
      'hasChange': false
    },
    {
      'author': 'xiongff',
      'info': 'just for example praise list item.',
      'praise': 0,
      'hasChange': false
    },
    {
      'author': 'xiongf',
      'info': 'just for example praise list item.',
      'praise': 8,
      'hasChange': false
    },
    {
      'author': 'xiongfc',
      'info': 'just for example praise list item.',
      'praise': 33,
      'hasChange': false
    }]

    this.setData({
      list: this.list
    })
  },
  praiseThis: function (e) {
    var index = e.currentTarget.dataset.curindex;
    if (this.list[index]) {
      var hasChange = this.list[index].hasChange;
      if (hasChange !== undefined) {
        var onum = this.list[index].praise;
        if (hasChange) {
          this.list[index].praise = (onum - 1);
          this.list[index].hasChange = false;
        } else {
          this.list[index].praise = (onum + 1);
          this.list[index].hasChange = true;
        }
        this.setData({
          list: this.list
        })
      }
    }
  }
})

效果在附近视频里


praise.rar

3.4 KB, 下载次数: 241

列表点赞.mp4

790.4 KB, 下载次数: 428

效果演示

评分

参与人数 2原创 +1 浮云 +15 收起 理由
ziyou + 5 赞一个!
Rolan + 1 + 10 很给力!

查看全部评分

这个效果厉害了
6666666666666666666
2017-12-22 21:21:02 huidu 架构狮
地板
困扰好长时间的问题,谢谢分享
2018-8-16 14:18:35 Calvert 攻城狮
5#
谢谢分享
楼主,我写的页面点赞 hasClass自己会消失!请问一下这个是什么问题?
请教一下楼主,这个点赞hasChange 类名会自动消失是什么问题?
Echo88 发表于 2018-11-5 14:48
请教一下楼主,这个点赞hasChange 类名会自动消失是什么问题?

楼主 ,bug我找到了,把标签的hover-class="hover_praise" 去掉就可以了
强烈感谢楼主
发新帖
    您需要登录后才可以回帖 登录 | 立即注册