微信小程序实现留言功能


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 相关文章推荐
文本框的字数限制功能jquery插件
Nov 24 Javascript
JavaScript Object的extend是一个常用的功能
Dec 02 Javascript
ajax 缓存 问题 requestheader
Aug 01 Javascript
简单方法判断JavaScript对象为null或者属性为空
Sep 26 Javascript
基于AngularJS实现页面滚动到底自动加载数据的功能
Oct 16 Javascript
JavaScript组合模式学习要点
Aug 26 Javascript
详解jQuery的Cookie插件
Nov 23 Javascript
详解AngularJs路由之Ui-router-resolve(预加载)
Jun 13 Javascript
Angular中点击li标签实现更改颜色的核心代码
Dec 08 Javascript
vue-week-picker实现支持按周切换的日历
Jun 26 Javascript
Vue 利用指令实现禁止反复发送请求的两种方法
Sep 15 Javascript
简单了解JavaScript sort方法
Nov 25 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笔记之:基于面向对象设计的详解
2013/05/14 PHP
Laravel的throttle中间件失效问题解决方法
2016/10/09 PHP
PHP PDOStatement::execute讲解
2019/01/31 PHP
PHP7引入的&quot;??&quot;和&quot;?:&quot;的区别讲解
2019/04/08 PHP
飞鱼(shqlsl) javascript作品集
2006/12/16 Javascript
js Date自定义函数 延迟脚本执行
2010/03/10 Javascript
关于UTF-8的客户端用AJAX方式获取GB2312的服务器端乱码问题的解决办法
2010/11/30 Javascript
jquery清空表单数据示例分享
2014/02/13 Javascript
JavaScript中split() 使用方法汇总
2015/04/17 Javascript
js计算时间差代码【包括计算,天,时,分,秒】
2016/04/26 Javascript
关于JavaScript限制字数的输入框的那些事
2016/08/14 Javascript
微信小程序 navigation API实例详解
2016/10/02 Javascript
浅析Vue 生命周期
2018/06/21 Javascript
js动态设置select下拉菜单的默认选中项实例
2018/08/21 Javascript
VUE组件中的 Drawer 抽屉实现代码
2019/08/06 Javascript
ES6基础之数组和对象的拓展实例详解
2019/08/22 Javascript
vue框架制作购物车小球动画效果实例代码
2019/09/26 Javascript
js实现简单的打印表格
2020/01/15 Javascript
Python Web服务器Tornado使用小结
2014/05/06 Python
Python中条件判断语句的简单使用方法
2015/08/21 Python
使用Python内置的模块与函数进行不同进制的数的转换
2016/03/12 Python
利用Python3分析sitemap.xml并抓取导出全站链接详解
2017/07/04 Python
python实现kNN算法
2017/12/20 Python
python使用生成器实现可迭代对象
2018/03/20 Python
python实现连续图文识别
2018/12/18 Python
Python GUI编程 文本弹窗的实例
2019/06/11 Python
python区分不同数据类型的方法
2019/10/14 Python
HTML5实现经典坦克大战坦克乱走还能发出一个子弹
2013/09/02 HTML / CSS
德国2018年度最佳在线药房:Bodfeld Apotheke
2019/11/04 全球购物
初始化了一个没有run()方法的线程类,是否会出错?
2014/03/27 面试题
编程用JAVA解析XML的方式
2013/07/07 面试题
毕业生精彩的自我评价分享
2013/10/06 职场文书
配件采购员岗位职责
2013/12/03 职场文书
流动人口婚育证明
2014/10/19 职场文书
催款律师函范文
2015/05/27 职场文书
小学庆六一主持词
2015/06/30 职场文书