微信小程序?qū)崿F(xiàn)留言功能
需求:留言可以點(diǎn)贊,點(diǎn)過(guò)贊之后圖標(biāo)變化,沒(méi)人只能點(diǎn)贊一次,留言可以在留言
index.wxml
<view class='liuyanbox'>
<view class='ly-title clear'>
<view class='llt-left fl'>鄰居評(píng)論({{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代碼(用于點(diǎn)贊的展示,實(shí)現(xiàn)小手、空心小手)
.nodzimg2 {
background: url(空心);
background-size: 100%;
}
.dzimg2 {
background: url(實(shí)心);
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
})
}
})
}
從后臺(tái)傳過(guò)來(lái)的數(shù)據(jù)

留言里面的留言
js
點(diǎn)擊我要留言
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
})
},
留言點(diǎn)贊
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
})
}
}
})
},
點(diǎn)贊返回的為點(diǎn)贊人的id

其中所得View初始化全部為false
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
微信小程序?qū)崿F(xiàn)分類菜單激活狀態(tài)隨列表滾動(dòng)而自動(dòng)切換效果詳解
這篇文章主要介紹了微信小程序分類菜單激活狀態(tài)跟隨列表滾動(dòng)自動(dòng)切換,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)吧2023-01-01
js實(shí)現(xiàn)緩沖運(yùn)動(dòng)效果的方法
這篇文章主要介紹了js實(shí)現(xiàn)緩沖運(yùn)動(dòng)效果的方法,涉及javascript操作元素運(yùn)動(dòng)的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-04-04
Web前端框架bootstrap實(shí)戰(zhàn)【第一次接觸使用】
Bootstrap是Twitter推出的一個(gè)開(kāi)源的前端框架。這篇文章主要介紹了Web前端框架bootstrap實(shí)戰(zhàn),需要的朋友可以參考下2016-12-12
jquery和css3中的選擇器nth-child使用方法和用途示例
nth-child(),是CSS3中的一個(gè)偽類選擇符,JQuery選擇器繼承了CSS的部分語(yǔ)法,允許通過(guò)標(biāo)簽名、屬性名、內(nèi)容對(duì)DOM元素進(jìn)行快速、準(zhǔn)確的選擇。2023-03-03
輕松實(shí)現(xiàn)javascript數(shù)據(jù)雙向綁定
這篇文章教大家輕松實(shí)現(xiàn)javascript數(shù)據(jù)雙向綁定,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2015-11-11
JavaScript實(shí)現(xiàn)簡(jiǎn)易的天數(shù)計(jì)算器實(shí)例【附demo源碼下載】
這篇文章主要介紹了JavaScript實(shí)現(xiàn)簡(jiǎn)易的天數(shù)計(jì)算器,結(jié)合實(shí)例形式分析了javascript日期與時(shí)間計(jì)算的相關(guān)技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2017-01-01
一個(gè)Js文件函數(shù)中調(diào)用另一個(gè)Js文件函數(shù)的方法演示
這篇文章主要介紹了一個(gè)Js文件函數(shù)中調(diào)用另一個(gè)Js文件函數(shù)的方法,兩個(gè)javascript文件中相互調(diào)用函數(shù),主要是將引入的Js文件代碼放在</body>下面。具體操作方法可查看下文,需要的朋友可以參考下2017-08-08
html的DOM中Event對(duì)象onblur事件用法實(shí)例
這篇文章主要介紹了html的DOM中Event對(duì)象onblur事件用法,實(shí)例分析了onblur事件的使用范圍與對(duì)應(yīng)的javascript使用技巧,需要的朋友可以參考下2015-01-01
基于layPage插件實(shí)現(xiàn)兩種分頁(yè)方式淺析
這篇文章主要為大家詳細(xì)介紹了基于layPage插件實(shí)現(xiàn)兩種分頁(yè)方式 ,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-07-07

