15-微信小程序商城 产品评价页布局（微信小程序商城开发、小程序毕业设计、小程序源代码）（黄菊华-微信小程序开发教程）

产品评价页布局

本节主要讲解产品评价页的布局和实现，效果如图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.key
    if (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.key
    console.log("得" + key + "分")
    this.setData({
      key: key
    })
  }

小程序商城配备了javaweb、php、asp、net几个版本的后台、其他版本陆续制作中