uniapp点击按钮获取到值

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档


前言

提示:这里可以添加本文要记录的大概内容:

可以通过点击获取到按钮的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;
}

效果图
在这里插入图片描述

总结

此方法为其一 仅供参考


版权声明:本文为m0_66702519原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。