产品评价页布局
本节主要讲解产品评价页的布局和实现，效果如图13-22所示。
1.布局分析
结构布局分析示意如图13-23所示。
根据上面的布局分析，我们会产生基础的框架，代码示例如下：
<view> <!—第1层-开始--><view></view> <!—第2层-评论标题--><view> <!—第2层-评论输入框区块--><textarea></textarea><!—第3层-评论输入框内容--></view> <block wx:for…> <!—第2层-所有五星--><image></image> <!—第3层-单个五星--></block><view> <!—第2层-提交区块--><button></button><!—第3层-提交按钮--></view> </view> <!—第1层-结束-->
根据效果图分析出框架的层级后，在每个层级的view加上样式，编码实现即可。
2.功能实现
.wxml文件代码示例如下：
<!-- 评价 --><swiper-item ><view class="group"><view class="group-header">评价内容</view><view class="group-body"><textarea placeholder="请输入产品的评价内容，可输入1000字" maxlength="1000"></textarea></view><view class="group-body" style='height:50px;'><block wx:for="{{stars}}" wx:key="xxid"><image class="star-image" style="left: {{item*150}}rpx" src="{{key > item ?(key-item == 0.5?halfSrc:selectedSrc) : normalSrc}}"><view class="item" style="left:0rpx" data-key="{{item+0.5}}" bindtap="selectLeft"></view><view class="item" style="left:75rpx" data-key="{{item+1}}" bindtap="selectRight"></view></image></block></view><view class="btn-submit"><button class="btn-block btn-orange" bindtap="questionSubmit">确认提交</button></view></view></swiper-item>
.wxss文件代码示例如下：
/*评价*/.group{flex: 1;display: flex;flex-direction: column;box-sizing: border-box;background: #f9f9f9; font-size: 14px;}.group-header{line-height: 70rpx;display: flex;padding: 0 20rpx;background: #f9f9f9;}.group-body{background: #fff;border-top: 1rpx solid #ddd;border-bottom: 1rpx solid #ddd; padding: 5rpx 20rpx;}.btn-submit{padding: 20rpx;width: 93%;}.btn-block{width: 100%;line-height: 88rpx;}.btn-orange{background: #f7982a;color: #fff;}/* 五星评分样式 */.star-image{position: absolute;width: 100rpx;height: 100rpx;src: "/images/normal.png";}.item{width: 75rpx;height: 150rpx;}
.js文件代码示例如下：
//点击右边,半颗星selectLeft: function (e) {var key = e.currentTarget.dataset.keyif (this.data.key == 0.5 && e.currentTarget.dataset.key == 0.5) {//只有一颗星的时候,再次点击,变为0颗key = 0;}console.log("得" + key + "分")this.setData({key: key})},//点击左边,整颗星selectRight: function (e) {var key = e.currentTarget.dataset.keyconsole.log("得" + key + "分")this.setData({key: key})}
小程序商城配备了javaweb、php、asp、net几个版本的后台、其他版本陆续制作中
【微信小程序参考资料】
（1）微信小程序学习路线 /
（2）Java微信小程序商城系统指导 /course/3066521
（3）PHP微信小程序商城系统指导 /course/3066518
（4）微信官方文档 https://developers./miniprogram/dev/framework/
15-微信小程序商城 产品评价页布局（微信小程序商城开发 小程序毕业设计 小程序源代码）（黄菊华-微信小程序开发教程）
