首页 > 其他 > 详细

一个增加与减少的两端的按钮

时间:2020-09-14 16:18:47      阅读:121      评论:0      收藏:0      [点我收藏+]

技术分享图片

 

 

<view class="right">
                        <view class="m-numSelector">
                            <view @tap="onCountMinus" class="minus" :data-scindex="scIndex" :data-index="index"></view>
                            <input type="number" :value="prod.prodCount" disabled></input>
                            <view @tap="onCountPlus" class="plus" :data-scindex="scIndex" :data-index="index"></view>
                        </view>
                    </view>
/* 加减框 */

.m-numSelector .minus, .m-numSelector input, .m-numSelector .plus {
  float: left;
  box-sizing: border-box;
  height: 40rpx;
  border: 2rpx solid #d9d9d9;
}

.m-numSelector {
  float: right;
}

.m-numSelector .minus, .m-numSelector .plus {
  position: relative;
  width: 40rpx;
}
/* 去除相邻的样式 */
.m-numSelector .minus {
  border-right: 0;
  border-top-left-radius: 4rpx;
  border-bottom-left-radius: 4rpx;
}

.m-numSelector input {
  width: 40rpx;
  text-align: center;
  color: #333;
  font-size: 24rpx;
}
/* 去除相邻的样式 */
.m-numSelector .plus {
  border-left: 0;
  border-top-right-radius: 4rpx;
  border-bottom-right-radius: 4rpx;
}

.m-numSelector .minus::before, .m-numSelector .plus::before,
.m-numSelector .plus::after {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  content: ‘ ‘;
  width: 22rpx;
  height: 3rpx;
  background-color: #7f7f7f;
}

.m-numSelector .plus::after {
  transform: rotate(90deg);
}

.m-numSelector:not(.disabled) .minus:not(.disabled):active,
.m-numSelector:not(.disabled) .plus:not(.disabled):active {
  background-color: #f4f4f4;
}

具体样式再调整

 

后续再增加相关的判断与递增递减函数

一个增加与减少的两端的按钮

原文:https://www.cnblogs.com/yoona-lin/p/13666847.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!