第一次用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:
情况一
情况二