微信小程序自定义组件---范围段的填写及选中

最新推荐文章于 2024-06-19 11:50:52 发布

HZR_497

最新推荐文章于 2024-06-19 11:50:52 发布

阅读量588

点赞数

CC 4.0 BY-SA版权

文章标签：微信小程序自定义组件

本文链接：https://blog.youkuaiyun.com/HZR_497/article/details/88974331

本文介绍了一个微信小程序中自定义组件的实现案例，包括组件的创建、调用及交互过程。通过具体代码展示了如何实现一个带有输入框和选项选择功能的弹窗组件。

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

效果图：

调用处：（例如在index页面调用）

index.json(input_select为组件的名称)

{

"usingComponents": {

"input_select": "/component/selector/input_select/input_select",

}

}

index.js

Page({

/*

* 页面的初始数据

*/

data: {

content: "自定义组件",

number_list: [{

key: "100",

name: "100以下"

}, {

key: "200",

name: "200以下"

}, {

key: "300",

name: "300以下"

}]

},

/**

* 生命周期函数--监听页面初次渲染完成

*/

onReady: function() {

//获得input_select组件

this.input_select = this.selectComponent("#input_select");

},

此处省略微信小程序的部分方法

//*************************单选带输入框按钮*******************************

showDialog: function() {

this.input_select.showDialog();

},

//取消事件

_inputSelectCancel() {

console.log('你点击了取消');

this.input_select.hideDialog();

},

//确认事件

_inputSelectConfirm(e) {

console.log('你点击了确定==', e.detail);

this.input_select.hideDialog();

},

})

index.wxml:

<view catchtap="showDialog">
  单选带输入框按钮
  <input_select id="input_select" bind:inputSelectCancel="_inputSelectCancel" bind:inputSelectConfirm="_inputSelectConfirm" content='{{content}}' number_list="{{number_list}}">
  </input_select>
</view>

自定义组件部分（）

命名为：input_select

input_select.wxml

<!--component/selector/singer.wxml-->
<view class='singer-bg' wx:if="{{isShow}}">
  <view class='singer-body'>
    <view class='singer-body-name'>
      <view class='singer-body-name-line'></view>
      <view class='singer-body-name-txt'>{{content}}</view>
      <view class='singer-body-name-line'></view>
    </view>
    <view class='singer-body-double'>
      <view class='double-input'>
        <input class='double-input-txt' value='{{json.start}}' placeholder='开始值' bindblur='changestart' bindconfirm='changestart' bindinput='changestart'></input>
      </view>
      <view class='double-input'>
        <input class='double-input-txt' value='{{json.end}}' placeholder='结束值' bindblur='changeend' bindconfirm='changeend' bindinput='changeend'></input>
      </view>
    </view>

    <view class='singer-body-list'>
      <block wx:for="{{number_list}}" wx:for-item="item" wx:key="unique">
        <view class='body-list-item-choosed' wx:if="{{json.start==item.key}}" data-key='{{item.key}}' bindtap='chooseNumber'>{{item.name}}</view>
        <view class='body-list-item'data-key='{{item.key}}' bindtap='chooseNumber' wx:else>{{item.name}}</view>
      </block>
    </view>
    <view class='singer-body-kongbai'></view>
    <view class='singer-body-icon'>
      <view class='icon-left' catchtap='_inputSelectCancel'>重置</view>
      <view class='icon-right' catchtap='_inputSelectConfirm'>确定</view>
    </view>
  </view>
</view>

input_select.js

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    //标题文字
    content: {
      type: String,
      value: ''
    },
    number_list: {
      type: Array,
      value: [{
        key: '',
        name: ''
      }, ]
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    isShow: false,
    json: {
      start: "",
      end: "",
    }
  },
  /**
   * 组件的方法列表
   */
  methods: {
    chooseNumber: function(e) {
      this.setData({
        json: {
          start: e.currentTarget.dataset.key,
          end: this.data.json.end,
        }
      })
    },
    changestart: function(event) {
      var start = event.detail.value;
      this.setData({
        json: {
          start: start,
          end: this.data.json.end,
        }
      })
    },
    changeend: function(event) {
      var end = event.detail.value;
      this.setData({
        json: {
          start: this.data.json.start,
          end: end,
        }
      })
    },
    //隐藏弹框
    hideDialog: function() {
      this.setData({
        isShow: false,
        json: {
          start: "",
          end: "",
        }
      })
    },
    //展示弹框
    showDialog: function() {
      this.setData({
        isShow: true,
      })
    },
    /*
     * 内部私有方法建议以下划线开头
     * triggerEvent 用于触发事件
     */
    _inputSelectCancel() {
      //触发取消回调
      this.triggerEvent("inputSelectCancel")
    },
    _inputSelectConfirm() {
      //触发成功回调
      this.triggerEvent("inputSelectConfirm", this.data.json);
    }
  }
})

input_select.json

{
  "component": true
}

input_select.wxss

/* component/selector/singer.wxss */

.singer-bg {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.5);
}

.singer-bg .singer-body {
  min-width: 100%;
  width: 100%;
  height: 968rpx;
  max-height: 968rpx;
  background: rgba(255, 255, 255, 1);
  border-radius: 20px 20px 0px 0px;
  position: absolute;
  left: 0;
  bottom: 0;
}

.singer-bg .singer-body .singer-body-name {
  width: 100%;
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  margin-top: 60rpx;
  margin-bottom: 50rpx;
}

.singer-bg .singer-body .singer-body-name .singer-body-name-line {
  width: 260rpx;
  border-bottom: 2rpx solid rgba(240, 240, 240, 1);
}

.singer-bg .singer-body .singer-body-name .singer-body-name-txt {
  height: 48rpx;
  font-size: 34rpx;
  font-family: PingFangSC-Medium;
  font-weight: 500;
  color: rgba(0, 0, 0, 1);
  line-height: 48rpx;
  margin-left: 10rpx;
  margin-right: 10rpx;
}

.singer-bg .singer-body .singer-body-kongbai {
  width: 100%;
  height: 120rpx;
}

.singer-bg .singer-body .singer-body-icon {
  width: 100%;
  height: 110rpx;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  position: fixed;
  bottom: 0;
  z-index: 9999999999;
  background: rgba(255, 255, 255, 1);
}

.singer-bg .singer-body .singer-body-icon .icon-left {
  width: 374rpx;
  height: 110rpx;
  background: rgba(0, 89, 179, 0.1);
  font-size: 36rpx;
  font-family: PingFangSC-Regular;
  font-weight: 400;
  color: rgba(0, 89, 179, 1);
  line-height: 50rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.singer-bg .singer-body .singer-body-icon .icon-right {
  width: 374rpx;
  height: 110rpx;
  background: rgba(0, 89, 179, 1);
  font-size: 36rpx;
  font-family: PingFangSC-Regular;
  font-weight: 400;
  color: rgba(255, 255, 255, 1);
  line-height: 50rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.singer-bg .singer-body .singer-body-double {
  width: 100%;
  max-width: 100%;
  display: flex;
  flex-wrap: nowrap;
}

.singer-bg .singer-body .singer-body-double .double-input {
  width: 320rpx;
  height: 78rpx;
  background: rgba(255, 255, 255, 1);
  border-radius: 6rpx;
  border: 1px solid rgba(204, 204, 204, 1);
  margin-left: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.singer-bg .singer-body .singer-body-double .double-input .double-input-txt {
  width: 280rpx;
  height: 78rpx;
  font-size: 30rpx;
  font-family: PingFangSC-Medium;
  font-weight: 500;
  color: rgba(26, 26, 26, 1);
  padding: 0rpx 20rpx 0rpx 20rpx;
}

.singer-bg .singer-body .singer-body-list {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  padding: 0rpx 0rpx 0rpx 30rpx;
  margin-top: 50rpx;
}

.singer-bg .singer-body .singer-body-list .body-list-item {
  width: 212rpx;
  height: 70rpx;
  background: rgba(240, 240, 240, 1);
  border-radius: 35rpx;
  margin-right: 30rpx;
  margin-bottom: 30rpx;
  font-size: 30rpx;
  font-family: PingFangSC-Regular;
  font-weight: 400;
  color: rgba(51, 51, 51, 1);
  display: flex;
  align-items: center;
  justify-content: center;
}

.singer-bg .singer-body .singer-body-list .body-list-item-choosed {
  width: 212rpx;
  height: 70rpx;
  background: rgba(0, 89, 179, 0.25);
  border-radius: 35rpx;
  margin-right: 30rpx;
  margin-bottom: 30rpx;
  font-size: 30rpx;
  font-family: PingFangSC-Regular;
  font-weight: 400;
  color: rgba(0, 89, 179, 1);
  display: flex;
  align-items: center;
  justify-content: center;
}