微信小程序中多个相同的组件点击时当前样式的改变

第一次用CSDN写博客，以前的是新浪博客，地址为：http://blog.sina.com.cn/99yt99 以后一直就用CSDN，新浪上面就不更新了。

1、需要的东西

  一张透明背景的图片：proper.png     

2、效果展示

  默认选中与样式改变的为“距离优先”，当然自己可以在ceshi.js中改变自己想默认的那个。通过点击切换改变样式）

3、源码：

wxml代码

<view class="precedence">   
    <block wx:for="{{pres}}">
         <view class="precedenceCont" bindtap='click' data-id="{{index}}">
             <text style="{{index == id?'color:#8B008B':'color:gray'}}">{{item.preX}}</text>
             <image class="preImg" style="{{index == id?'background:url(../../images/proper.png) no-repeat':'background:url()'}}"></image>             
         </view>
    </block>
</view>    

wxss代码

.precedence{  
  width: 100%;  
  height: 300rpx;  
  background-color: rgba(0,0,0,0.04);  
}   
.precedenceCont{  
  width: 680rpx;  
  height: 100rpx;  
  margin: 0 auto;  
  border-bottom: 1rpx solid gainsboro;  
  line-height: 100rpx;  
  font-size: 32rpx;  
}  
  
.preImg{  
  display: inline-block;  
  width: 40rpx;  
  height: 40rpx;  
  margin-top: 26rpx;  
  margin-right: 10rpx;  
  float: right;  
}  

js代码

Page({
  data: {
    id: 2, //进入页面时，默认选择第3个，如果不需要默认选中，去掉此语句即可；id从0开始    
    pres: [
      {
        preX: "综合排序"
      },
      {
        preX: "评分最好"
      },
      {
        preX: "距离优先"
      }
    ],
  },
  click: function (e) {
    var ids = e.currentTarget.dataset.id;  //获取自定义的id   
    this.setData({
      id: ids  //把获取的自定义id赋给当前组件的id(即获取当前组件)  
    })
  }
})  

4、注意与补充的一点

      对于微信小程序的这类组件比如text组件------行内元素，与html不同的是，在微信小程序中字符（字符串）单独存在一行时会被当做一个组件占据一行，这样需要重新调整样式。

   wxss:

   

   wxml:

   情况一

   

   

   情况二