微信小程序> 微信小程序留言功能实现

微信小程序留言功能实现

浏览量:1661 时间: 来源:阵雨丶

需求:留言可以点赞,点过赞之后图标变化,没人只能点赞一次,留言可以在留言

index.wxml

<view class='liuyanbox'>  <view class='ly-title clear'>    <view class='llt-left fl'>邻居评论({{yanlist.count}})</view>    <view class='llt-right fr' data-id="0" data-user="{{list.user_id}}" bindtap='liuynChange'>我要留言</view>  </view>  <view>    <view class='xunhuan' wx:for="{{yanlist.list}}">      <view class='zuobianll'>        <view class='ll-content clear'>          <view class='llc-touxiang fl'>            <image class='llc-image' src='{{item.avatar}}'></image>          </view>          <view class='llc-nall fl clear'>            <view class='clear'>              <view class='llc-name fl'>{{item.nick_name}}</view>              <view class='llc-time fl'>{{item.create_date}}</view>            </view>            <view class='ll-lynr'>              <text space="emsp" class='ll-trxt'>{{item.content}}</text>            </view>          </view>        </view>        <view class='haz clear'>          <view class='fr huifu'>            <image class='hf-img' data-id="{{item.id}}" data-user="{{item.user_id}}" bindtap='liuynChange' src='https://jpadmin.99dudesign.com/public/img/source/btn_icon_huifu.png'></image>          </view>          <view class='fr dianzan clear'>            <!-- <image class='dzimg fl' src='https://jpadmin.99dudesign.com/public/img/source/btn_icon_zhendianzan.png' data-id="{{item.id}}" bindtap='llzanChange'></image> -->            <view class='dzimg fl {{item.lldzView?"dzimg2":"nodzimg2"}}' data-id="{{item.id}}" bindtap='llzanChange'></view>            <view class='dz-num fl' data-text="{{item.like_count}}">{{item.like_count}}</view>          </view>        </view>      </view>      <view class='one-huiwo' wx:if="{{item._child}}!=null" wx:for="{{item._child}}">        <view class='hw-top clear'>          <view class='htop-tx fl'>            <image class='htptx-img' src='{{item.avatar}}'></image>          </view>          <view class='htop-you fl '>            <view class='htop-name clear '>              <view class='fl hh-name'>{{item.nick_name}}</view>              <view class='fl hh-time'>{{item.create_date}}</view>            </view>            <view class='htop-content '>              <text class='' space="emsp">{{item.content}}</text>            </view>          </view>        </view>        <view class='htop-dz clear'>          <view class='fr hhdznum' data-text="{{item.like_count}}">{{item.like_count}}</view>          <view class='fr dz {{item.cnmView?"dzimg2":"nodzimg2"}}' data-id="{{item.id}}" bindtap='llzanChangeTwo'></view>        </view>      </view>    </view>  </view></view>
<!-- 留言 --><view class='zhegai hide {{llbView?"block":""}}' bindtap='llbquxiao'></view><view class='liuyanban hide {{llbView?"block":""}}'>  <view class='liuybtitle'>留言</view>  <textarea class='shuruk' value="{{llbcontent}}" bindinput="llbInput"></textarea>  <view class='qandq clear'>    <view class='quxiao fl' bindtap='llbquxiao'>取消</view>    <view class='queding fl' bindtap='llbChange'>确定</view>  </view></view> 主要的wxss代码(用于点赞的展示,实现小手、空心小手)
.nodzimg2 {  background: url(空心);  background-size: 100%;}.dzimg2 {  background: url(实心);  background-size: 100%;}
js
var liuynfun = function (that) {  wx.request({    url: getApp().data.host + '...',    method: "POST",    data: {      "column": "Routine",      "row_id": that.data.url    },    header: {      'content-type': 'application/x-www-form-urlencoded'    },    success: function (res) {      if (res.data.list != "") {        //第一行留言        for (var i in res.data.list) {          res.data.list[i].lldzView = false;          if (res.data.list[i].like_user != null) {            if (res.data.list[i].like_user.indexOf(wx.getStorageSync('user_id')) != "-1") {              res.data.list[i].lldzView = true            }          }          // 第二行留言          if (res.data.list[i]._child){            for (var j in res.data.list[i]._child){              res.data.list[i]._child[j].cnmView=false              if (res.data.list[i]._child[j].like_user != null) {                if (res.data.list[i]._child[j].like_user.indexOf(wx.getStorageSync('user_id')) != "-1") {                  res.data.list[i]._child[j].cnmView = true                }              }            }          }        }      }      that.setData({        yanlist: res.data      })    }  })}
从后台传过来的数据小程序

留言里面的留言 js
 点击我要留言
liuynChange: function (e) {    var that = this;    console.log(e.currentTarget.dataset.id)    that.setData({      llbView: true,      pid: e.currentTarget.dataset.id,      to_user_id: e.currentTarget.dataset.user    })  },
留言点赞
llzanChangeTwo: function (e) {    console.log(e)    var that = this;    wx.request({      url: getApp().data.host + '...',      method: "POST",      data: {        "column": "Reply",        "user_id": wx.getStorageSync('user_id'),        "id": e.currentTarget.dataset.id      },      header: {        'content-type': 'application/x-www-form-urlencoded'      },      success: function (res) {        var data = that.data.yanlist        console.log(data)        if (res.data != null) {          if (res.data.indexOf(wx.getStorageSync('user_id')) == "-1") {            for (var i in data.list) {              if (data.list[i]._child) {                for (var j in data.list[i]._child) {                  if (e.currentTarget.dataset.id == data.list[i]._child[j].id) {                    data.list[i]._child[j].cnmView=true                    data.list[i]._child[j].like_count = parseInt(data.list[i]._child[j].like_count) + 1                  }                }              }            }            that.setData({              yanlist: data            })          }        } else {          for (var i in data.list) {            if (data.list[i]._child) {              for (var j in data.list[i]._child) {                if (e.currentTarget.dataset.id == data.list[i]._child[j].id) {                  data.list[i]._child[j].cnmView = true                  data.list[i]._child[j].like_count = parseInt(data.list[i]._child[j].like_count) + 1                }              }            }          }          that.setData({            yanlist: data          })        }      }    })  },
点赞返回的为点赞人的id小程序
其中所得View初始化全部为false



















版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

最新资讯

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎