经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » 移动开发 » 微信小程序 » 查看文章
微信小程序实现留言功能
来源:jb51  时间:2018/11/1 9:44:08  对本文有异议

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

index.wxml

  1. <view class='liuyanbox'>
  2. <view class='ly-title clear'>
  3. <view class='llt-left fl'>邻居评论({{yanlist.count}})</view>
  4. <view class='llt-right fr' data-id="0" data-user="{{list.user_id}}" bindtap='liuynChange'>我要留言</view>
  5. </view>
  6. <view>
  7. <view class='xunhuan' wx:for="{{yanlist.list}}">
  8. <view class='zuobianll'>
  9. <view class='ll-content clear'>
  10. <view class='llc-touxiang fl'>
  11. <image class='llc-image' src='{{item.avatar}}'></image>
  12. </view>
  13. <view class='llc-nall fl clear'>
  14. <view class='clear'>
  15. <view class='llc-name fl'>{{item.nick_name}}</view>
  16. <view class='llc-time fl'>{{item.create_date}}</view>
  17. </view>
  18. <view class='ll-lynr'>
  19. <text space="emsp" class='ll-trxt'>{{item.content}}</text>
  20. </view>
  21. </view>
  22. </view>
  23. <view class='haz clear'>
  24. <view class='fr huifu'>
  25. <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>
  26. </view>
  27. <view class='fr dianzan clear'>
  28. <!-- <image class='dzimg fl' src='https://jpadmin.99dudesign.com/public/img/source/btn_icon_zhendianzan.png' data-id="{{item.id}}" bindtap='llzanChange'></image> -->
  29. <view class='dzimg fl {{item.lldzView?"dzimg2":"nodzimg2"}}' data-id="{{item.id}}" bindtap='llzanChange'></view>
  30. <view class='dz-num fl' data-text="{{item.like_count}}">{{item.like_count}}</view>
  31. </view>
  32. </view>
  33. </view>
  34. <view class='one-huiwo' wx:if="{{item._child}}!=null" wx:for="{{item._child}}">
  35. <view class='hw-top clear'>
  36. <view class='htop-tx fl'>
  37. <image class='htptx-img' src='{{item.avatar}}'></image>
  38. </view>
  39. <view class='htop-you fl '>
  40. <view class='htop-name clear '>
  41. <view class='fl hh-name'>{{item.nick_name}}</view>
  42. <view class='fl hh-time'>{{item.create_date}}</view>
  43. </view>
  44. <view class='htop-content '>
  45. <text class='' space="emsp">{{item.content}}</text>
  46. </view>
  47. </view>
  48. </view>
  49. <view class='htop-dz clear'>
  50. <view class='fr hhdznum' data-text="{{item.like_count}}">{{item.like_count}}</view>
  51. <view class='fr dz {{item.cnmView?"dzimg2":"nodzimg2"}}' data-id="{{item.id}}" bindtap='llzanChangeTwo'></view>
  52. </view>
  53. </view>
  54. </view>
  55. </view>
  56. </view>
  57. <!-- 留言 -->
  58. <view class='zhegai hide {{llbView?"block":""}}' bindtap='llbquxiao'></view>
  59. <view class='liuyanban hide {{llbView?"block":""}}'>
  60. <view class='liuybtitle'>留言</view>
  61. <textarea class='shuruk' value="{{llbcontent}}" bindinput="llbInput"></textarea>
  62. <view class='qandq clear'>
  63. <view class='quxiao fl' bindtap='llbquxiao'>取消</view>
  64. <view class='queding fl' bindtap='llbChange'>确定</view>
  65. </view>
  66. </view>

主要的wxss代码(用于点赞的展示,实现小手、空心小手)

  1. .nodzimg2 {
  2. background: url(空心);
  3. background-size: 100%;
  4. }
  5. .dzimg2 {
  6. background: url(实心);
  7. background-size: 100%;
  8. }

js

  1. var liuynfun = function (that) {
  2. wx.request({
  3. url: getApp().data.host + '...',
  4. method: "POST",
  5. data: {
  6. "column": "Routine",
  7. "row_id": that.data.url
  8. },
  9. header: {
  10. 'content-type': 'application/x-www-form-urlencoded'
  11. },
  12. success: function (res) {
  13. if (res.data.list != "") {
  14. //第一行留言
  15. for (var i in res.data.list) {
  16. res.data.list[i].lldzView = false;
  17. if (res.data.list[i].like_user != null) {
  18. if (res.data.list[i].like_user.indexOf(wx.getStorageSync('user_id')) != "-1") {
  19. res.data.list[i].lldzView = true
  20. }
  21. }
  22. // 第二行留言
  23. if (res.data.list[i]._child){
  24. for (var j in res.data.list[i]._child){
  25. res.data.list[i]._child[j].cnmView=false
  26. if (res.data.list[i]._child[j].like_user != null) {
  27. if (res.data.list[i]._child[j].like_user.indexOf(wx.getStorageSync('user_id')) != "-1") {
  28. res.data.list[i]._child[j].cnmView = true
  29. }
  30. }
  31. }
  32. }
  33. }
  34. }
  35. that.setData({
  36. yanlist: res.data
  37. })
  38. }
  39. })
  40. }

从后台传过来的数据


留言里面的留言

js

点击我要留言

  1. liuynChange: function (e) {
  2. var that = this;
  3. console.log(e.currentTarget.dataset.id)
  4. that.setData({
  5. llbView: true,
  6. pid: e.currentTarget.dataset.id,
  7. to_user_id: e.currentTarget.dataset.user
  8. })
  9. },

留言点赞

  1. llzanChangeTwo: function (e) {
  2. console.log(e)
  3. var that = this;
  4. wx.request({
  5. url: getApp().data.host + '...',
  6. method: "POST",
  7. data: {
  8. "column": "Reply",
  9. "user_id": wx.getStorageSync('user_id'),
  10. "id": e.currentTarget.dataset.id
  11. },
  12. header: {
  13. 'content-type': 'application/x-www-form-urlencoded'
  14. },
  15. success: function (res) {
  16. var data = that.data.yanlist
  17. console.log(data)
  18. if (res.data != null) {
  19. if (res.data.indexOf(wx.getStorageSync('user_id')) == "-1") {
  20. for (var i in data.list) {
  21. if (data.list[i]._child) {
  22. for (var j in data.list[i]._child) {
  23. if (e.currentTarget.dataset.id == data.list[i]._child[j].id) {
  24. data.list[i]._child[j].cnmView=true
  25. data.list[i]._child[j].like_count = parseInt(data.list[i]._child[j].like_count) + 1
  26. }
  27. }
  28. }
  29. }
  30. that.setData({
  31. yanlist: data
  32. })
  33. }
  34. } else {
  35. for (var i in data.list) {
  36. if (data.list[i]._child) {
  37. for (var j in data.list[i]._child) {
  38. if (e.currentTarget.dataset.id == data.list[i]._child[j].id) {
  39. data.list[i]._child[j].cnmView = true
  40. data.list[i]._child[j].like_count = parseInt(data.list[i]._child[j].like_count) + 1
  41. }
  42. }
  43. }
  44. }
  45. that.setData({
  46. yanlist: data
  47. })
  48. }
  49. }
  50. })
  51. },

点赞返回的为点赞人的id

其中所得View初始化全部为false

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持w3xue。

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号