• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

小程序端,做类似于支付宝充值话费或流量的样式

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

1、js的data下,有一组数据:array: [25000,40000,50000,100000,150000,200000,300000,500000,1000000](假设是从后台传过来的)

2、先循环出来,获取index,设置data-id,便于获取当前点击位置

<view class='swiper_con'>
  <view wx:for="{{array}}" wx:item="item" wx:key="key" wx:for-index='index' data->
    {{item}}
    <!-- 右下角的三角形和打钩样式 -->
    <view class="gou {{index==current_tag?'on col':''}}"></view>
  </view>
</view>

3、设置css样式(外边框,右下角的三角形和打钩):

.box {
    /* margin: 20px auto; */
    padding: 15px;
    height: 25px;
    width: 20%;
    position: relative;
    cursor: pointer;
    overflow: hidden;
    line-height: 25px;
    border: 1px solid #ccc;
    /* background-color: #ccc; */
    display: inline-block;
}
/*外边宽*/
.box.border {
    border: 1px solid red;
}
/*右下角三角形和打钩样式*/
.box .gou {
    position: absolute;
    width: 0;
    height: 0;
    border-left: 17px solid transparent;
    right: 0px;
    bottom: 0;
    /* background-color: red; */
}

.col{
    border-bottom: 17px solid red;
}

.box .gou.on::after {
    border-color: #fff;
}

.box .gou::after {
    position: absolute;
    top: 6px;
    left: -8px;
    width: 4px;
    height: 7px;
    border-style: solid;
    border-color: red;
    border-width: 0 2px 2px 0;
    -webkit-transform: rotateZ(45deg);
    content: "";
}

4、首先,在data下,设置current_tag: null,

   点击事件中:获取自定义的data-id值,

   把获取到的id,赋值给current_tag,

   根据current_tag值和index值,来判断显示对应的css。

add_class:function(e) {
  var that = this;
  // console.log(e)
  var id = e.target.dataset.id;  //获取自定义的ID值 
  console.log("current_tag", id)
  this.setData({
    current_tag: id,
  })
}

 

效果图:

点击选择25000:                                                                                    点击选择40000:

  

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
微信小程序开发入门与实践发布时间:2022-07-18
下一篇:
微信小程序云函数开发环境 node.js的安装参考发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap