提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档
前言
提示:这里可以添加本文要记录的大概内容:
可以通过点击获取到按钮的id值 获取到id值可以通过点击的下标添加想要的数额
提示:以下是本篇文章正文内容,下面案例可供参考
一、使用步骤
1.引入库
代码如下(示例):
html页面
<view class="chose-pp">
<block>
<view class="annusd" wx:for="{{array}}" data-price="{{item.array}}"
data-id="{{index}}" bindtap="choseTxtColor"
style="{{index == id?'background:url(../resource/button/on_chose.png) right no-repeat; border:1rpx solid #e8580c; color: #e8580c':'baciground:url();border:1rpx solid gainsboro;color:gray'}}">
<text class="chose-p" >{{item.name}}</text>
<text class="chose-p" >{{item.price}}元</text>
</view>
</block>
</view>
js页面
var id ;
Page({
data:{
array: [{ name: '单拍', price: '198'},
{ name: '亲子套餐', price: '398' },
{ name: '活动套餐', price: '598' },
{ name: '女王套餐', price: '1198' },
{ name: '自定义数量',price:''}
],
id:0, //进入页面时,默认选择第0个,如果不需要默认选中,注释掉就可以了
xianshji:false,
detailwe:'',//input的值
detailweFo:''
},
choseTxtColor:function(e){
var id = e.currentTarget.dataset.id; //获取自定义的ID值
console.log("id值",id);
this.setData({
id:id
})
},
})
css部分
.annusd{
border-radius: 6px; font-size: 26rpx; height: 40px; width: 27.5%; margin: 5px; float: left;padding-top: 5px;
}
.chose-p{
line-height: 18px; width: 100%; height:20px; text-align: center; float: left;
}
效果图
总结
此方法为其一 仅供参考