ad盖☜ 我暗恋妳可知道
关注数: 3 粉丝数: 109 发帖数: 1,405 关注贴吧数: 16
关于微信小程序做评论时点击星星实现 今天刚学着做微信小程序页面 要做一个订单评价的页面 然后去百度上各种看别人的代码很懵逼 所以自己想了很久慢慢想着做了一个 效果还行 代码不多 都是边做边改边看效果 大概做了快一天 哈哈分享下代码 下次有人做 可以直接用 这个针对一行星的 如果要多行 在复制一遍改名字就可以了 哈哈 js里面的: data: { title1: ['物流评价'],//标题 imgindex1: [1, 2, 3, 4, 5],//用于循环图片 一共五张图片 imgsrc: "../images/star_light.png",//有颜色的图片 newimg: "../images/xingxing.png",//无颜色的图片 imgid1:5,//用于默认显示图片做判断 },ap1: function(e) { //绑定一个事件 var id = e.currentTarget.id //获取页面上的id值 this.setData({ imgid1: id //把获取的id值赋值到data中的 imgid1变量 })} css的: .img{ width: 70rpx; height: 70rpx; margin-left: 30rpx; } #imgview{ margin-left: 120rpx; margin-top: 80rpx; } .wlimg1{ width: 50rpx; height: 50rpx; margin-left: 30rpx; } #btn{ position:absolute; bottom: 0rpx; width: 100%; color: goldenrod } wxml的: <view style=' margin-left: 30rpx; margin-top:50rpx;'> <!--循环标题--> <block wx:for="{{title1}}" wx:for-item="itemes" wx:key="index"> <view> <text> {{itemes}}</text> </view> <view id="imgview"> <!--循环图片--> <block wx:for="{{imgindex1}}" wx:for-item="itemes" imgid="{{imgid1}}" wx:key="index"> <!--判断 如果imgid1值大于了当前图片的下标就把图片换成灰色图片 否则就换成黄色的图片--> <image class='img' src="{{imgid1<index?'../images/xingxing.png':'../images/star_light.png'}} " bindtap='tap1' id ='{{index}}'> </image> </block> </view> </block>
1 下一页