微信小程序实现留言功能


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 非图片动态loading效果实现代码
Apr 09 Javascript
JQuery-tableDnD 拖拽的基本使用介绍
Jul 04 Javascript
js设置组合快捷键/tabindex功能的方法
Nov 21 Javascript
jquery easyui combox一些实用的小方法
Dec 25 Javascript
jQuery的$.proxy()应用示例介绍
Apr 03 Javascript
JavaScript前端图片加载管理器imagepool使用详解
Dec 29 Javascript
jquery中EasyUI实现异步树
Mar 01 Javascript
js实现选中页面文字将其分享到新浪微博
Nov 05 Javascript
实用又漂亮的BootstrapValidator表单验证插件
May 30 Javascript
JavaScript闭包和范围实例详解
Dec 19 Javascript
原生JavaScript实现AJAX、JSONP
Feb 07 Javascript
vue实现按钮切换图片
Jan 20 Vue.js
微信小程序签到功能
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
thinkphp验证码显示不出来的解决方法
2014/03/29 PHP
php7 安装yar 生成docker镜像
2017/05/09 PHP
PHP开发中解决并发问题的几种实现方法分析
2017/11/13 PHP
用Javascript来生成ftp脚本的小例子
2013/07/03 Javascript
使用javascript实现页面定时跳转总结篇
2013/09/21 Javascript
Jquery实现自定义窗口随意的拖拽
2014/03/12 Javascript
一个奇葩的最短的 IE 版本判断JS脚本
2014/05/28 Javascript
document.forms用法示例介绍
2014/06/26 Javascript
为何JS操作的href都是javascript:void(0);呢
2015/11/12 Javascript
canvas绘制万花筒效果(代码分享)
2017/01/20 Javascript
JS实现侧边栏鼠标经过弹出框+缓冲效果
2017/03/29 Javascript
原生js获取left值和top值的三种方法
2017/08/02 Javascript
Angular 如何使用第三方库的方法
2018/04/18 Javascript
详解微信小程序canvas圆角矩形的绘制的方法
2018/08/22 Javascript
vue.js实现图书管理功能
2019/09/24 Javascript
JavaScript缓动动画函数的封装方法
2020/11/25 Javascript
vue使用lodop打印控件实现浏览器兼容打印的方法
2021/02/07 Vue.js
vue前端和Django后端如何查询一定时间段内的数据
2021/02/28 Vue.js
[01:46]DOTA2上海特锦赛小组赛英文解说KotlGuy采访
2016/02/27 DOTA
python的Template使用指南
2014/09/11 Python
python实现数值积分的Simpson方法实例分析
2015/06/05 Python
python 计算两个日期相差多少个月实例代码
2017/05/24 Python
Python编程之变量赋值操作实例分析
2017/07/24 Python
Python 数值区间处理_对interval 库的快速入门详解
2018/11/16 Python
Pytorch实现的手写数字mnist识别功能完整示例
2019/12/13 Python
matplotlib 画双轴子图无法显示x轴的解决方法
2020/07/27 Python
Python获取excel内容及相关操作代码实例
2020/08/10 Python
简单掌握CSS3中resize属性的用法
2016/04/01 HTML / CSS
创建索引时需要注意的事项
2013/05/13 面试题
晨会主持词
2014/03/17 职场文书
安全承诺书格式
2014/05/21 职场文书
装饰工程师岗位职责
2014/06/08 职场文书
缓刑期间思想汇报范文
2014/10/10 职场文书
2014年涉外离婚协议书范本
2014/11/20 职场文书
单位介绍信格式
2015/01/31 职场文书
一文了解MySQL二级索引的查询过程
2022/02/24 MySQL