微信小程序实现留言功能


Posted in Javascript onOctober 31, 2018

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

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

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

Javascript 相关文章推荐
指定js可访问其它域名的cookie的方法
Sep 18 Javascript
JS自定义对象实现Java中Map对象功能的方法
Jan 20 Javascript
jQuery实现的网格线绘制方法
Jun 20 Javascript
浅谈JS中的!=、== 、!==、===的用法和区别
Sep 24 Javascript
bootstrap datepicker限定可选时间范围实现方法
Sep 28 Javascript
Vue 进阶教程之v-model详解
May 06 Javascript
vue实现在一个方法执行完后执行另一个方法的示例
Aug 25 Javascript
微信小程序使用map组件实现解析经纬度功能示例
Jan 22 Javascript
微信小程序自定义组件实现环形进度条
Nov 17 Javascript
vue实现图片按比例缩放问题操作
Aug 11 Javascript
解决在Vue中使用axios POST请求变成OPTIONS的问题
Aug 14 Javascript
Vue中添加滚动事件设置的方法详解
Sep 14 Javascript
微信小程序签到功能
Oct 31 #Javascript
vue+element-ui实现表格编辑的三种实现方式
Oct 31 #Javascript
VUE+Element UI实现简单的表格行内编辑效果的示例的代码
Oct 31 #Javascript
微信小程序实现签到功能
Oct 31 #Javascript
vuejs+element UI点击编辑表格某一行时获取内容填入表单的示例
Oct 31 #Javascript
微信小程序实现自动定位功能
Oct 31 #Javascript
iview在vue-cli3如何按需加载的方法
Oct 31 #Javascript
You might like
php ucwords() 函数将字符串中每个单词的首字符转换为大写(实现代码)
2016/05/12 PHP
php封装的表单验证类完整实例
2016/10/19 PHP
使用正则去除php代码中的注释方法
2016/11/03 PHP
一个基于jQuery的树型插件(OrangeTree)使用介绍
2012/05/03 Javascript
jQuery UI 实现email输入提示实例
2013/08/15 Javascript
JS读取XML文件示例代码
2013/11/15 Javascript
js与jquery获取父元素,删除子元素的两种不同方法
2014/01/09 Javascript
jQuery.holdReady()使用方法
2014/05/20 Javascript
Node.js node-schedule定时任务隔多少分钟执行一次的方法
2015/02/10 Javascript
解析javascript中鼠标滚轮事件
2015/05/26 Javascript
Spring MVC中Ajax实现二级联动的简单实例
2016/07/06 Javascript
解析ajaxFileUpload 异步上传文件简单使用
2016/12/30 Javascript
jQuery插件zTree实现单独选中根节点中第一个节点示例
2017/03/08 Javascript
Vue.js进阶知识点总结
2018/04/01 Javascript
使用eslint和githooks统一前端风格的技巧
2020/07/29 Javascript
VUE 实现element upload上传图片到阿里云
2020/08/12 Javascript
Python操作csv文件实例详解
2017/07/31 Python
Python中的is和==比较两个对象的两种方法
2017/09/06 Python
Python中的浮点数原理与运算分析
2017/10/12 Python
Django使用Celery异步任务队列的使用
2018/03/13 Python
Python 实现引用其他.py文件中的类和类的方法
2018/04/29 Python
python中退出多层循环的方法
2018/11/27 Python
tensorflow实现测试时读取任意指定的check point的网络参数
2020/01/21 Python
基于Python+QT的gui程序开发实现
2020/07/03 Python
Numpy中的数组搜索中np.where方法详细介绍
2021/01/08 Python
HTML文本属性&amp;颜色控制属性的实现
2019/12/17 HTML / CSS
Lulu & Georgia官方网站:购买地毯、家具、抱枕、壁纸、床上用品等
2018/03/19 全球购物
机电一体化毕业生自荐信
2014/06/19 职场文书
护理专科学生自荐书
2014/07/05 职场文书
十佳标兵事迹材料
2014/08/18 职场文书
五四演讲稿范文
2014/09/03 职场文书
党员倡议书
2015/01/19 职场文书
工作犯错保证书
2015/05/11 职场文书
歌咏比赛口号大全
2015/12/25 职场文书
Python scrapy爬取起点中文网小说榜单
2021/06/13 Python
yolov5返回坐标的方法实例
2022/03/17 Python