微信小程序实现留言功能

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

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

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

(0)

相关推荐

  • 微信小程序实现留言板功能

    本文实例为大家分享了微信小程序实现留言板功能,可以手写,可以删除,可以快速留言,供大家参考,具体内容如下 const app = getApp(); Page({ /** * 页面的初始数据 */ data: { msgData: [ { child_id: 1, msg: "泡澡水不要太热.", checked:'' },//双引号 { child_id: 2, msg: "面部比较干,想补个水.", checked: '' }, { child_id: 3, m

  • 微信小程序实现留言板(Storage)

    本文为大家分享了微信小程序实现留言板的具体实现方法,供大家参考,具体内容如下 先说一下小程序的开发环境之类的基础东西 1.到微信公众平台下载开发者工具.安装 2.appID与没有appID的区别是,appID可以用真机预览,而没有就不行 3.目录解释: a)pages放页面,每个都必须含有js\json\wxml\wxss四个文件. js文件类似于js文件,json是配置,比如整个页面顶端的名字颜色之类的,wxml类似于html,wxss类似于css. 其中代码格式也相似. b)utils中放公

  • 微信小程序仿知乎实现评论留言功能

    最近沉迷学习无法自拔,太久没有码字,码一个小程序留言功能实现.先上一波最后效果图: (删除按钮,是用户自己的留言时才会显示该按钮) 实现技术 后台:SSM框架 数据库:MySQL数据库 数据库设计 评论功能的实现主要涉及三个表 comment:存储留言评论信息,表结构如下: 表中,必须的字段:id,user_id,reply_comment_id,comment,insert_time,source_id 添加了冗余字段username,reply_user_name,userphoto 主要用

  • 微信小程序实现评论功能

    本文实例为大家分享了微信小程序实现评论功能的具体代码,供大家参考,具体内容如下 前端 <textarea class='the_prw_in' bindinput='bindblur' cursor-spacing="130" placeholder='说点什么吧...' maxlength="76"> </textarea> <view class='the_prw_btn' bindtap='btn_send'> 留言 <

  • 微信小程序实现留言板

    本文实例为大家分享了微信小程序实现留言板的具体代码,供大家参考,具体内容如下 CSS: /* pages/order/message2/message2.wxss */ .msg-box{ padding: 20px; } .send-box{ display: flex; } .input{ border: 1px solid #B0C4DE; padding: 5px; } .msg-info{ display: block; margin: 10px 0 0 0 ; color: #339

  • 小程序实现发表评论功能

    本文实例为大家分享了小程序实现发表评论功能的具体代码,供大家参考,具体内容如下 1.点击发表按钮 判断内容是否为空 如果为空提示请输入内容 2.如果内容不为空 将评论框里输入的内容的值传入评论列表 <view wx:for="{{release}}" class='shoppcall comment' data-id="{{item.id }}"> <button class='revoke' bindtap='binddelete' data-i

  • 小程序实现留言板

    本文实例为大家分享了小程序实现留言板的具体代码,供大家参考,具体内容如下 wxml <view class='section'> <textarea class='message1' type='text' placeholder="请选择或者输入捎话(60字以内)" maxlength='80' style="word- wrap:break-word" onfocus="this.blur()" bindtap=''>

  • 微信小程序实现留言功能

    需求:留言可以点赞,点过赞之后图标变化,没人只能点赞一次,留言可以在留言 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="{{l

  • 微信小程序录音实现功能并上传(使用node解析接收)

    背景 我在开发小程序的时候,有需求要实现录音功能,并能上传给服务器.小程序录音功能我是使用的微信的wx.getRecorderManager()实现的,通过该方法创建实例,实例录音得到的文件是本地临时文件,上传文件需要使用微信的wx.uploadFile(Object object)方法,这就是本次项目的背景. 小程序端 html页面主要是第一个按钮,两个事件,长按开始录音,松手停止录音.第二个按钮只是一个播放录音的功能,用于确定录音是否成功 <!--pages/record/record.wx

  • 微信小程序 在线支付功能的实现

    微信小程序 在线支付功能 最近需要在微信小程序中用到在线支付功能,于是看了一下官方的文档,发现要在小程序里实现微信支付还是很方便的,如果你以前开发过服务号下的微信支付,那么你会发现其实小程序里的微信支付和服务号里的开发过程如出一辙,下面我就具体说一下小程序里微信支付的开发流程和注意点. 1.开通微信支付和微信商户号 这个过程就和开通服务号的微信支付过程一样,没有什么可以说的. 2.获得用户的openid 首页我们需要在小程序的客户端js中获取当前用户的openid,通过调用wx.login方法可

  • 微信小程序 五星评价功能的实现

    微信小程序 五星评价功能 话不多说,我们来看一下效果图: 要实现的效果:点击到第几颗星,就要显示到第几颗星, 接下来直接查看源码: <view class="l-evalbox row"> <text class="l-evaltxt">满意度:</text> <view class="l-evalist flex-1" bindtap="chooseicon"> <ico

  • Android中微信小程序支付倒计时功能

    看效果 由于web 经验弱爆- -  一开始我的思路是找事件,但是看了半天API 基本都是点击触摸,通过物理触发- - 我居然忽略了生命周期,生命周期+线程不就完全OK吗- 事实证明,线程还是王道啊,一开始就应该这么搞嘛- 度娘上面也看了很多都是用js写的,but,可能刚做没几天吧,我对js与微信小程序掌握还不够熟练 思路: onLoad:function(options)调用倒计时方法函数 定义线程进行数据动态现实 1. 日期转化成毫秒 2.定义线程动态显示 3.渲染倒计时 1.毫秒转成固定格

  • 微信小程序列表渲染功能之列表下拉刷新及上拉加载的实现方法分析

    本文实例讲述了微信小程序列表渲染功能之列表下拉刷新及上拉加载的实现方法.分享给大家供大家参考,具体如下: 微信小程序为2017年1月9日打下了一个特殊的标签,迅速刷爆了网络和朋友圈,最近我也写了一个demo程序体验一把.微信小程序和vuejs有些像,都是数据驱动视图&单向数据绑定,而其体验要比H5页面好很多,这得益于微信环境的支持以及首次运行时同时加载所有页面的处理.本文将分享微信小程序列表的下拉刷新和上划加载的实践. 效果图 首先来看看程序效果图,以下四张图从左至右依次是:下来刷新动画.下拉刷

  • 微信小程序显示下拉列表功能【附源码下载】

    本文实例讲述了微信小程序显示下拉列表功能.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 app.json文件: { "pages":[ "views/views", "views/navigators/navigator1/navigator1", "views/navigators/navigator2/navigator2", "views/navigators/navigator3/naviga

  • 微信小程序实现日历功能

    本文实例为大家分享了微信小程序实现日历功能的具体代码,供大家参考,具体内容如下 效果图: 代码: <view class="calendar"> <view class="selectDate"> <view class="goleft iconfont icon-jianzuo" bindtap="prevMonth"></view> <view class="

随机推荐