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;
}

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

总结

此方法为其一 仅供参考

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

萧癒

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值