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

微信小程序学习:加减控件

原作者: [db:作者] 来自: [db:来源] 收藏 邀请
微信小程序学习:加减控件
<!--index.wxml--> <view class='stepper'> <text class='{{minusStatus}}' type='number' bindtap='bindMinus'>-</text> <input bindinput='bindManual' value='{{num}}'></input> <text bindtap='bindPlus'>+</text> </view> /**index.wxss**/

/*全局样式*/

page {
padding: 20px 0;
}

/*主容器*/

.stepper {
width:80px;
height:26px;
margin: 0 auto;
border: 1px solid #ccc;
border-radius: 3px;
}

/*加号和减号*/

.stepper text {
float: left;
width: 19px;
line-height: 26px;
text-align: center;
}

/*数值*/

.stepper input {
width: 40px;
height: 26px;
float: left;
margin: 0 auto;
text-align: center;
font-size: 12px;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
}

/*普通样式*/

.stepper .normal {
color:black;
}

/*禁用样式*/

.stepper .disable {
color: #ccc;
}

微信小程序效果图:

 


鲜花

握手

雷人

路过

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

请发表评论

全部评论

专题导读
上一篇:
微信小程序封装接口发布时间:2022-07-18
下一篇:
如何在微信小程序里引用npm包?发布时间: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