微信小程序实现留言功能


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的event详解。
Sep 06 Javascript
手机端页面rem宽度自适应脚本
May 20 Javascript
JavaScript+html5 canvas绘制缤纷多彩的三角形效果完整实例
Jan 26 Javascript
javascript自动切换焦点控制效果完整实例
Feb 02 Javascript
js创建对象几种方式的优缺点对比
Sep 28 Javascript
Vue监听数组变化源码解析
Mar 09 Javascript
Vue使用mixins实现压缩图片代码
Mar 14 Javascript
vue 父组件调用子组件方法及事件
Mar 29 Javascript
微信小程序滑动选择器的实现代码
Aug 10 Javascript
详解js 创建对象的几种方法
Mar 08 Javascript
解决Vue的文本编辑器 vue-quill-editor 小图标样式排布错乱问题
Aug 03 Javascript
详解JavaScript原型与原型链
Nov 16 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 json格式和js json格式 js跨域调用实现代码
2012/09/08 PHP
phpstrom使用xdebug配置方法
2013/12/17 PHP
PHP+Mysql实现多关键字与多字段生成SQL语句的函数
2014/11/05 PHP
33道php常见面试题及答案
2015/07/06 PHP
php简单复制文件的方法
2016/05/09 PHP
文字幻灯片
2006/06/26 Javascript
JQuery浮动DIV提示信息并自动隐藏的代码
2010/08/29 Javascript
jQuery实现提示密码强度的代码
2015/07/15 Javascript
jquery实现删除一个元素后面的所有元素功能
2015/12/21 Javascript
AngularJS中比较两个数组是否相同
2016/08/24 Javascript
H5图片压缩与上传实例
2017/04/21 Javascript
vue计算属性时v-for处理数组时遇到的一个bug问题
2018/01/21 Javascript
JavaScript实现京东购物放大镜和选项卡效果的方法分析
2018/07/05 Javascript
vue-cli项目中使用echarts图表实例
2018/10/22 Javascript
详解vue在项目中使用百度地图
2019/03/26 Javascript
基于JS实现前端压缩上传图片的实例代码
2019/05/14 Javascript
[04:56]经典回顾:前Ehome 与 前LGD
2015/02/26 DOTA
[56:42]VP vs RNG 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
零基础写python爬虫之爬虫框架Scrapy安装配置
2014/11/06 Python
详谈python在windows中的文件路径问题
2018/04/28 Python
python将秒数转化为时间格式的实例
2018/09/16 Python
Python Tkinter模块 GUI 可视化实例
2019/11/20 Python
Python Pandas 转换unix时间戳方式
2019/12/07 Python
pytorch获取模型某一层参数名及参数值方式
2019/12/30 Python
纯CSS3实现扇形动画菜单(简化版)实例源码
2017/01/17 HTML / CSS
html5中去掉input type date默认样式的方法
2018/09/06 HTML / CSS
英国最大的运动营养公司之一:LA Muscle
2018/07/02 全球购物
Lancer Skincare官方网站:抗衰老皮肤护理
2020/11/20 全球购物
网站创业计划书
2014/04/30 职场文书
2015年计算机教师工作总结
2015/07/22 职场文书
通讯稿格式及范文
2015/07/22 职场文书
2016年大学生社会实践心得体会
2015/10/09 职场文书
Python基础之教你怎么在M1系统上使用pandas
2021/05/08 Python
浅谈Python 中的复数问题
2021/05/19 Python
python pygame入门教程
2021/06/01 Python
Nginx防盗链与服务优化配置的全过程
2022/01/18 Servers