微信小程序实现留言功能


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实现点击按钮,连续地向textarea中添加值的实例代码
Mar 08 Javascript
javascript中使用正则计算中文长度的例子
Apr 29 Javascript
JS脚本根据手机浏览器类型跳转WAP手机网站(两种方式)
Aug 04 Javascript
在JavaScript的jQuery库中操作AJAX的方法讲解
Aug 15 Javascript
JS使用cookie设置样式的方法
Jun 30 Javascript
更靠谱的H5横竖屏检测方法(js代码)
Sep 13 Javascript
Vue.js组件tree实现无限级树形菜单
Dec 02 Javascript
vue 2.0 购物车小球抛物线的示例代码
Feb 01 Javascript
详解Axios统一错误处理与后置
Sep 26 Javascript
JQueryDOM之样式操作
Mar 27 jQuery
实现高性能javascript的注意事项
May 27 Javascript
JS+JQuery实现无缝连接轮播图
Dec 30 jQuery
微信小程序签到功能
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
咖啡常见的种类
2021/03/03 新手入门
PHP+Ajax实时自动检测是否联网的方法
2015/07/01 PHP
php生成图片验证码的方法
2016/04/15 PHP
可拖动窗口,附带鼠标控制渐变透明,开启关闭功能
2006/06/26 Javascript
农历与西历对照
2006/09/06 Javascript
jQuery制作仿腾讯web qq用户体验桌面
2013/08/20 Javascript
利用JQuery制作符合Web标准的QQ弹出消息
2014/01/14 Javascript
Js中使用hasOwnProperty方法检索ajax响应对象的例子
2014/12/08 Javascript
45个JavaScript编程注意事项、技巧大全
2015/02/11 Javascript
js实现登陆遮罩效果的方法
2015/07/28 Javascript
jquery表单插件form使用方法详解
2017/01/20 Javascript
vue自定义键盘信息、监听数据变化的方法示例【基于vm.$watch】
2019/03/16 Javascript
详解Vue 匿名、具名和作用域插槽的使用方法
2019/04/22 Javascript
element中table高度自适应的实现
2020/10/21 Javascript
解决vuex刷新数据消失问题
2020/11/12 Javascript
Python 查看文件的编码格式方法
2017/12/21 Python
pip安装时ReadTimeoutError的解决方法
2018/06/12 Python
深入浅析Python传值与传址
2018/07/10 Python
wxPython实现画图板
2020/08/27 Python
如何查看Django ORM执行的SQL语句的实现
2020/04/20 Python
基于PyTorch中view的用法说明
2021/03/03 Python
html5视频常用API接口的实战示例
2020/03/20 HTML / CSS
将世界上最美丽的摄影作品转化为艺术作品:Photos.com
2017/11/28 全球购物
法国娇韵诗官方旗舰店:Clarins是来自法国的天然护肤品牌
2018/06/30 全球购物
FLIR美国官网:热成像, 夜视和红外摄像系统
2018/07/13 全球购物
Wilson体育用品官网:美国著名运动器材品牌
2019/05/12 全球购物
Linux如何压缩可执行文件
2013/10/21 面试题
智能电子应届生求职信
2013/11/10 职场文书
物业客服专员岗位职责
2013/11/30 职场文书
复核员上岗演讲稿
2014/01/05 职场文书
运动会广播稿500字
2014/01/28 职场文书
2014国庆节主题活动方案:快乐的国庆节
2014/09/16 职场文书
2014社区健康教育工作总结
2014/12/16 职场文书
Ajax异步刷新功能及简单案例
2021/11/20 Javascript
MySQL的表级锁,行级锁,排它锁和共享锁
2022/07/15 MySQL
HTML静态页面获取url参数和UserAgent的实现
2022/08/05 HTML / CSS