查看: 373|回复: 0

微信小程序页面开源---列表点赞效果

[复制链接]
发表于 2019-9-6 22:41:56 | 显示全部楼层 |阅读模式
qwe.gif

微信小程序渲染的列表信息数据很难从视图层去单独修改某一个列表渲染的数据样式。原因一是无法像WEB开发是直接操作DOM,另一方面部分小程序开发者不了解小程序VIEW层的渲染机制。细节点说明:

1、列表的数据来源于JS,因此在无法操作dom的情况下就只能修改数据(体现数据驱动模式)。

2、使用data-*来存储当前点击的项对应的点赞数量。

3、添加一个额外的hasChanged属性来记录该项是否已经点赞(如果允许一个用户不停点赞,可以取消该属性)。

代码结构

index.wxml

  1. <view class="container">
  2.   <view class="list" wx:for="{{list}}" wx:key="key" wx:for-item="item" wx:for-index="index">
  3.     <view class="praise {{item.hasChange? 'changed': ''}}" hover-class="hover_praise" bindtap="praiseThis" data-curIndex="{{index}}">{{item.praise}}</view>
  4.     <view class="author">{{item.author}}</view>
  5.     <view class="info">{{item.info}}</view>
  6.   </view>
  7. </view>
复制代码

index.wxss

  1. .container {
  2.   background: #fff;
  3.   height: 100%;
  4.   font-family: 'Miscrsoft YaHei'
  5. }

  6. .list {
  7.   background: #ddd;
  8.   position: relative;
  9.   padding: 10px 10px 10px 70px;
  10.   height: 50px;
  11.   margin-bottom: 10px;
  12. }

  13. .praise {
  14.   width: 50px;
  15.   height: 50px;
  16.   background: #999;
  17.   text-align: center;
  18.   line-height: 50px;
  19.   border-radius: 50%;
  20.   position: absolute;
  21.   left: 10px;
  22.   transition: 0.5s;
  23.   color: #fff;
  24. }

  25. .hover_praise, .changed {
  26.   transition: 0.5s;
  27.   background: #f5d;
  28. }

  29. .author {
  30.   display: block;
  31.   height: 20px;
  32. }

  33. .info {
  34.   height: 30px;
  35.   line-height: 30px;
  36.   font-size: 12px;
  37. }
复制代码

index.js

  1. const app = getApp()

  2. Page({
  3.   data: {

  4.   },
  5.   onLoad: function () {
  6.     this.list = [{
  7.       'author': 'xiongcf',
  8.       'info': 'just for example praise list item.',
  9.       'praise': 0,
  10.       'hasChange': false
  11.     },
  12.     {
  13.       'author': 'xiongcc',
  14.       'info': 'just for example praise list item.',
  15.       'praise': 133,
  16.       'hasChange': false
  17.     },
  18.     {
  19.       'author': 'xiongff',
  20.       'info': 'just for example praise list item.',
  21.       'praise': 0,
  22.       'hasChange': false
  23.     },
  24.     {
  25.       'author': 'xiongf',
  26.       'info': 'just for example praise list item.',
  27.       'praise': 8,
  28.       'hasChange': false
  29.     },
  30.     {
  31.       'author': 'xiongfc',
  32.       'info': 'just for example praise list item.',
  33.       'praise': 33,
  34.       'hasChange': false
  35.     }]

  36.     this.setData({
  37.       list: this.list
  38.     })
  39.   },
  40.   praiseThis: function (e) {
  41.     var index = e.currentTarget.dataset.curindex;
  42.     if (this.list[index]) {
  43.       var hasChange = this.list[index].hasChange;
  44.       if (hasChange !== undefined) {
  45.         var onum = this.list[index].praise;
  46.         if (hasChange) {
  47.           this.list[index].praise = (onum - 1);
  48.           this.list[index].hasChange = false;
  49.         } else {
  50.           this.list[index].praise = (onum + 1);
  51.           this.list[index].hasChange = true;
  52.         }
  53.         this.setData({
  54.           list: this.list
  55.         })
  56.       }
  57.     }
  58.   }
  59. })
复制代码

代码下载

游客,如果您要下载源码或者查看隐藏内容请回复




回复

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

关闭

网站推荐上一条 /1 下一条



邮箱:[email protected] QQ:791577401 木子牛HTML5工作室 版权所有

© MUZINIU Inc.小黑屋|手机版|Archiver|HANGNIU  

Powered by MuZiNiuX3.2( 豫ICP备12017936号 )

 豫公网安备 41078102000103号

快速回复 返回顶部 返回列表