微信小程序——评论功能
生活随笔
收集整理的這篇文章主要介紹了
微信小程序——评论功能
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
1.前端數(shù)據(jù)渲染
<view class="list"><view>{{goodsitem.id}}</view><view>{{goodsitem.name}}</view><view>{{goodsitem.price}}</view><view>{{goodsitem.desc}}</view> </view><view><view><input type="text" bindinput="speak" placeholder="請(qǐng)輸入評(píng)論內(nèi)容"/></view><button bindtap="formsubmit" data-pid="{{zero}}">發(fā)布評(píng)論</button> </view><view><text style="font-size: 26px;color: brown;">評(píng)論</text><view wx:for="{{ data }}" wx:key="index"><view>{{item.speak}}<view wx:for="{{ item.sub }}" wx:key="index" wx:for-item="itemName" style="margin: 20rpx;background-color: bisque;">{{itemName.speak}}</view></view><view><input type="text" bindinput="speak" placeholder="請(qǐng)輸入評(píng)論內(nèi)容"/></view><button bindtap="formsubmit" data-pid="{{item.id}}">發(fā)布評(píng)論</button></view> </view>2.js頁(yè)面
/*** 頁(yè)面的初始數(shù)據(jù)*/data: {zero:0},/*** 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面加載*/onLoad(options) {let that = thislet id = options.idwx.request({url: 'http://www.five.com/index.php/api/goodsitem', //僅為示例,并非真實(shí)的接口地址data: {id},header: {'content-type': 'application/json' // 默認(rèn)值 },success:function(res) {let data = res.data.datalet goodsitem = res.data.goodsitemthat.setData({data:data,goodsitem:goodsitem})}})},speak(c){let speak = c.detail.valuethis.setData({speak:speak})},formsubmit(c){let that = thislet speak = this.data.speaklet pid = c.currentTarget.dataset.pidwx.request({url: 'http://www.five.com/index.php/api/addSpeak', //僅為示例,并非真實(shí)的接口地址method:'post',data: {speak:speak,uid:1,wid:wid,pid:pid},header: {'content-type': 'application/json' // 默認(rèn)值},success (res) {if(res.data.code == 200){let data = res.data.datalet goodsitem = res.data.goodsitemthat.setData({data:data,goodsitem:goodsitem})}}})},3.API后臺(tái)接口
//詳情信息public function goodsitem(){$id = \request()->get('id');$data = \App\Models\Goods::with(['Speak'])->where('id',$id)->first()->toArray();//調(diào)用遞歸方法$data = $this->subTree($data);//查詢?cè)斍閿?shù)據(jù)$goodsitem = \App\Models\Goods::with(['Speak'])->where('id',$id)->first()->toArray();return json_encode(['code' => 200,'msg' => '查詢成功','data' => $data,'goodsitem' => $goodsitem]);}public function addSpeak(){$data = \request()->all()//評(píng)論添加入庫(kù)Speak::insert($data);//評(píng)論后重新調(diào)用詳情信息$id = $data['wid'];$data = \App\Models\Goods::with(['Speak'])->where('id',$id)->first()->toArray();//調(diào)用遞歸方法$data = $this->subTree($data);//查詢?cè)斍閿?shù)據(jù)$goodsitem = \App\Models\Goods::with(['Speak'])->where('id',$id)->first()->toArray();return json_encode(['code' => 200,'msg' => '評(píng)論成功','data' => $data,'goodsitem' => $goodsitem]);}public function subTree($data, $pid = 0) {// 返回的結(jié)果$arr = [];foreach ($data['speak'] as $val) {// 給定的PID是當(dāng)前記錄的上級(jí)IDif ($pid == $val['pid']) {// 遞歸$val['sub'] = $this->subTree($data,$val['id']);$arr[] = $val;}}return $arr;}4.沒(méi)有樣式
總結(jié)
以上是生活随笔為你收集整理的微信小程序——评论功能的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇: 在美国捡电脑
- 下一篇: 这些软件可以快速实现图片翻译文字