小程序view选中添加样式

最新推荐文章于 2025-05-19 16:09:53 发布

栾雨

最新推荐文章于 2025-05-19 16:09:53 发布

阅读量3.3k

点赞数

CC 4.0 BY-SA版权

分类专栏：小程序

本文链接：https://blog.youkuaiyun.com/qq_42934839/article/details/90898174

小程序专栏收录该内容

15 篇文章

订阅专栏

该博客介绍了如何在小程序中创建一个充值选择套餐的页面，替代传统的radio，利用view来实现类似效果。内容包括WXML数据绑定，WXSS样式设计以及JS交互逻辑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

做一个充值选择套餐的页面，没有用radio，直接用view做的效果，用radio传值比较方便。
WXML

<view class='cont'>
        <block wx:for="{{prices}}">
          <view data-select="{{item.select}}" data-price='{{item.price}}' class="{{item.select == priceSelect ? 'active':''}} border" bindtap="choosePrice">
            <view class='conts'>
              <view>{{item.price}}</view>
              <text>{{item.category}}</text>
            </view>
          </view>
        </block>
      </view>

data-price=’{{item.price}}'不需要打印价格出来可去掉。

WXSS

.cont{padding: 10px;padding-right: 0;overflow: hidden;}
.border{width:50%;display: inline-block;text-align: center;margin-bottom: 10px;float: left;}
.conts{background: #fff;border-radius: 5px;border: 1px solid #dedede;margin-right: 10px;padding:10px;}
.conts view{font-size: 24px;border-bottom: 1px dashed #dedede;}
.conts text{font-size: 12px;color: #999;}
.active .conts{color: #33cccc;border: 1px solid #33cccc;}
.active .conts text{color: #33cccc;}

data: {
    prices: [
      { "price": '￥69', "select": 1, "category": '一个月'},
      { "price": '￥699', "select": 2, "category": '一年' },
      { "price": '￥99', "select": 3, "category": '一个月' },
      { "price": '￥999', "select": 4, "category": '一年' },
      { "price": '￥199', "select": 5, "category": '一个月' },
      { "price": '￥1999', "select": 6, "category": '一年' },
      { "price": '￥299', "select": 7, "category": '一个月'},
      { "price": '￥2999', "select": 8, "category": '一年' }
    ],
  },
  choosePrice: function (data) {
    this.setData({//把选中值放入判断值
      priceSelect: data.currentTarget.dataset.select,
    });
    console.log(data.currentTarget.dataset.price);//打印当前价格，不需要可去掉
  },