欢迎来到258分享网,纯净的网络源码分享基地!

258资源分享网

全部作品
全部作品
网站源码
微信源码
素材特效
源码插件
视频教程
建站学院
热门搜索: 织梦  农业种植  农业  安全设置  官方
258资源分享 > 建站学院 > 微信开发 > 微信小程序-订单评价交互样式(WXMLWXSSJS)

推荐下载

HTML5响应式自适应网咯设计

2020-05-12   浏览:738

高端HTML5响应式企业通用网

2020-05-06   浏览:521

html5响应式外贸网站英文版

2020-05-08   浏览:509

HTML5自适应律师工作室类网

2020-04-04   浏览:502

HTML5影视传媒文化公司类网

2020-05-12   浏览:497

微信小程序-订单评价交互样式(WXMLWXSSJS)

发布时间:2020-12-08  

作者:Pluto,来自授权地址,本文作者还制作了另外一个不错的东西,在相关文章内;

效果图: 

微信小程序-订单评价交互样式(WXMLWXSSJS)

微信小程序-订单评价交互样式(WXMLWXSSJS)

微信小程序-订单评价交互样式(WXMLWXSSJS)


核心代码:

<view class="weui-flex__item"> <view class="placeholder" bindtap="selectCommentType" data-index="{{index}}" data-type="GOOD"> <image wx:if="{{item.commentType!='GOOD'}}" src=http://www.yiyongtong.com/archives/"/images/icon_good.png" style="width:30rpx;height:30rpx;"></image> <text wx:if="{{item.commentType!='GOOD'}}" class="order_comment_type_default">好评</text> <!--选中--> <image wx:if="{{item.commentType=='GOOD'}}" src=http://www.yiyongtong.com/archives/"/images/icon_good_select.png" style="width:30rpx;height:30rpx;"></image> <text wx:if="{{item.commentType=='GOOD'}}" class="order_comment_type_selected">好评</text> </view> </view>

1

2

3

4

5

6

7

8

9

10

11

12

selectCommentType: function (e) { console.log('选中的是第几条评论的哪一种类型', e.currentTarget.dataset); var commentList = this.data.commentList; var index = parseInt(e.currentTarget.dataset.index); commentList[index].commentType = e.currentTarget.dataset.type; this.setData({ 'commentList': commentList }); }

1

2

3

4

5

6

7

8

9

10

完整代码:

wxml

<form> <view class="order_comment_bg"> <view wx:for="{{commentList}}" style="background:#fff;"> <view class="order_comment_item"> <view class="weui-flex order_comment_content bottom_border"> <view> <view class="placeholder"> <image src=http://www.yiyongtong.com/archives/"{{item.commodityIcon}}" class="order_comment_img"></image> </view> </view