E企盈营销工具技术服务商 热线:4006-838-530

微信小程序:6.一个input输入框

E企盈直播平台营销卖货系统

封了一个输入框的组件,大概的逻辑是:1.输入框监听input事件,confirm事件,当数据发生变化时,反馈给外界2.要带上一个删除图标的样式不是很麻烦,就直接吧代码贴上来view class=’component’  view class=’inputbox’    image class=’image’ src=”../../assets/common/ic_search.png” /image    input class=’input’ bindinput=’hginput’ bindconfirm=’hgconfirm’ type=’text’ placeholder='{{placeholder}}’ type='{{type}}’ value='{{value}}’ confirm-type=’搜索’ /    icon wx:if='{{value}}’ bindtap=”clearValue” class=”icon” type=’clear’ size=”16″/icon  /view/viewlet that;Component({  properties: {    // 初始化的输入框的值    value: {      type: String,      value: ”,      observer(new_value, old_value) {        this.data.value = new_value;        this.triggerEvent(“hgchange”, this.data.value);      }    },    placeholder: {      type: String,      value: ‘请输入搜索内容’    },    //类型,默认为text    type: {      type: String,      value: “text”    }  },  ready() {    that = this;  },  methods: {    // input事件    hginput: function(data) {      this.setData({        value: data.detail.value      });    }, // commit事件    hgconfirm: function(data) {      this.triggerEvent(“hgconfirm”, this.data.value);    },    clearValue: function() {      this.setData({        value: ”      })      this.triggerEvent(“hgchange”, ”);    }  }})样式.component {  background-color: #fff;  width: 750rpx;  padding-top: 20rpx;  padding-bottom: 20rpx;}.inputbox {  box-sizing: border-box;  margin-left: 25rpx;  border: 1px solid #ccc;  width: 700rpx;  border-radius: 16rpx;  height: 70rpx;  background: rgba(248, 248, 248, 1);}.image {  vertical-align: middle;  display: inline-block;  margin-top: 0rpx;  margin-left: 20rpx;  width: 50rpx;  height: 50rpx;}.input {  vertical-align: middle;  width: 500rpx;  margin-left: 10px;  display: inline-block;  height: 60rpx;  margin-top: 5rpx;  font-size: 24rpx;}.icon {  position: absolute;  display: block;  top: 34rpx;  right: 40rpx;  opacity: 0.8;  cursor: pointer;}怎么使用就不多说了,界面大概这样老规矩,代码地址:git仓库https://github.com/hushilin01/public_mk_miniprogram

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 微信小程序:6.一个input输入框
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏