小程序点击评分

　　开发过小程序都知道小程序的坑也不少，今天就谈一下我碰见的坑，点击评分效果，由于是静态页面，所以数据全部是自己做的假数据，

小程序是没有dom节点的操作的，所以，统一从头到尾的数据操作dom效果，不多说，上代码：

 

html部分：

　　

<view class='compCont' wx:for="{{pageData}}" wx:key="item" wx:for-index="idx">

 

<view>

<view>提交人:{{item.tjr}}</view>

<view>提交日期：{{item.tjrDate}}</view>

</view>

<view>

<view>解决人:{{item.jjr}}</view>

<view>解决日期：{{item.jjrDate}}</view>

</view>

<view style='display:{{xxTog ?"none":"block"}}'>

<view>问题描述</view>

<view>{{item.ms}}</view>

</view>

<view style='display:{{xxTog ?"none":"block"}}'>

<view>解决方案</view>

<view>{{item.jjfa}}</view>

</view>

<view wx:for="{{item.imgData}}" wx:key="item">

<text class='textSe'>{{item.name}}：</text>

<view class='compevaluate'>

<image src='{{item.pf>=1?"../../img/axAc.png":"../../img/ax.png"}}' data-in="{{idx}}" data-num="1" data-code="{{item.code}}" bindtap='clickImg'></image>

<image src='{{item.pf>=2?"../../img/axAc.png":"../../img/ax.png"}}' data-in="{{idx}}" data-num="2" data-code="{{item.code}}" bindtap='clickImg'></image>

<image src='{{item.pf>=3?"../../img/axAc.png":"../../img/ax.png"}}' data-in="{{idx}}" data-num="3" data-code="{{item.code}}" bindtap='clickImg'></image>

<image src='{{item.pf>=4?"../../img/axAc.png":"../../img/ax.png"}}' data-in="{{idx}}" data-num="4" data-code="{{item.code}}" bindtap='clickImg'></image>

<image src='{{item.pf>=5?"../../img/axAc.png":"../../img/ax.png"}}' data-in="{{idx}}" data-num="5" data-code="{{item.code}}" bindtap='clickImg'></image>

</view>

 

</view>

<textarea placeholder='输入您对此次的评价' class='compText'></textarea>

<button class='Evaluation'>评价完成</button>

</view>

 

 

js部分：

 

Page({

　　data: {

　　index: 0,

　　pageData: [

　　{

　　tjr: "张三",

　　tjrDate: '2017/04/24',

　　jjr: '李四',

　　jjrDate: '2017/04/24',

　　ms: '打印发票时，点击打印按钮，不出纸，打印机纸仓有纸。',

　　jjfa: '打印机卡纸，清理后正常。',

　　//中间信息的展示和隐藏

　　imgData: [

　　　　{ name: "时效", pf: 0, code: 1 },

　　　　{ name: "态度", pf: 0, code: 2 },

　　　　{ name: "质量", pf: 0, code: 3 },

　　　　{ name: "综合评价", pf: 0, code: 4 }

]

},

{

　　tjr: "王五",

　　tjrDate: '2017/04/24',

　　jjr: '老六',

　　jjrDate: '2017/04/24',

　　ms: '打印鼓掌。',

　　jjfa: '打印清理后正常。',

　　imgData: [

　　　　{ name: "时效", pf: 0, code: 1 },

　　　　{ name: "态度", pf: 0, code: 2 },

　　　　{ name: "质量", pf: 0, code: 3 },

　　　　{ name: "综合评价", pf: 0, code: 4 }

　　]

},

],

xxTog:true,

xxToggle: true

 

},

clickImg:function(e){

// console.log(e)

//点击爱心效果

var num, code,me=this,index;

num = e.currentTarget.dataset.num;

code = e.currentTarget.dataset.code;

index = e.currentTarget.dataset.in;

var newData = me.data.pageData;

for (var i in newData[index].imgData){

if (newData[index].imgData[i].code == code){

newData[index].imgData[i].pf = num;

}

}

me.setData({

pageData: newData

})

},

})

 

 

注释我就不多写了  代码添上自己去琢磨吧。

有好的意见也希望大家多交流，技术在于讨论中进步：http://www.cnblogs.com/laiqiangjin