读心悦

  • 读心随笔
  • 读心里话
  • 计算机
  1. 首页
  2. 小程序
  3. 正文

小程序自定义组件的用法

2020年10月12日 93点热度 0人点赞 0条评论

在小程序中的公共模板和自定义组件,感觉自定义组件比较好用、顺手。

组件页面的写法和一般页面一样。

基本语法

Component 用于定义组件,指定组件的属性、数据和方法。代码:


Component({
  /**
   * 组件的属性列表
   */
  properties: {

  },

  /**
   * 组件的初始数据
   */
  data: {
    data:"duxin"
  },

  /**
   * 组件的方法列表
   */
  methods: {

  }
})

定义一个计数器组件来理解小程序的自定组件:

组件的wxml

<!-- 主容器 -->
<view class="stepper" bindtap="step">
  <!-- 减号 -->
  <text class="{{minusStatus}}" bindtap="bindMinus">-</text>
  <!-- 数值 -->
  <input type="number" bindchange="bindManual" value="{{num}}" />
  <!-- 加号 -->
  <text class="normal" bindtap="bindPlus">+</text>
  <view class="value" bindtap="sendMesgToFather">给父组件传值</view>
</view>

组件的样式wxss

/* component/stepper/stepper.wxss */

/*全局样式*/

page {
  padding: 20px 0;
}

/*主容器*/

.stepper {
  width: 350px;
  height: 26px;
  /*给主容器设一个边框*/
  border: 1px solid red;
  border-radius: 3px;
  margin: 0 auto;
  display: flex;
  justify-content: space-around;
}

/*加号和减号*/

.stepper text {
  width: 50px;
  line-height: 26px;
  text-align: center;
}

/*数值*/

.stepper input {
  width: 100px;
  height: 26px;
  float: left;
  margin: 0 auto;
  text-align: center;
  font-size: 12px;
  /*给中间的input设置左右边框即可*/
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
}

/*普通样式*/

.stepper .normal {
  color: black;
}

/*禁用样式*/

.stepper .disabled {
  color: #ccc;
}

.value {
  width: 150px;
}

 

组件的js:

 

// pages/Components/stepper/stepper.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    num: Number // 父组件传递的参数
  },

  /**
   * 组件的初始数据
   */
  data: {
    // num: 0,
    minusStatus: ''
  },

  /**
   * 组件的方法列表
   */
  methods: {
    step() {
      var myEventDetail = {
        name: "duxin",
        num: this.data.num
      } // detail对象,提供给事件监听函数
      var myEventOption = {} // 触发事件的选项
      this.triggerEvent('myevent', myEventDetail, myEventOption)
    },
    bindMinus() {
      var num = this.data.num;
      if (num > 0) {
        num--;
      }

      var minusStatus = num <= 0 ? "disabled" : "normal";
      this.setData({
        minusStatus: minusStatus,
        num: num
      })
    },
    bindPlus() {
      var num = this.data.num;
      num++;
      var minusStatus = num <= 0 ? "disabled" : "normal";
      this.setData({
        num: num,
        minusStatus: minusStatus
      })
    },
    sendMesgToFather() {
      // 向父组件发送值
      let step = 2;
      this.triggerEvent('realNameConfirm', step) 
    }
  }
})

 

在页面中引入组件:

在页面的json文件中引入组件:


{
"usingComponents": {
"stepper":"../Components/stepper/stepper"
}
}

<stepper  num="10"></stepper>

当页面向组件传值的时候,直接在组件设置相应的属性和属性值即可。如果页面接收组件传递过来的参数呢?那就在页面使用组件的时候直接绑定对应的函数来接收参数,代码如下:

 

<stepper  num="10"   bind:realNameConfirm="realNameConfirm"></stepper>

页面js:

// 接收组件传递过来的参数
  realNameConfirm(e) {
    console.log(e)
    this.setData({
      value:e.detail
    })
  },

 

赞微海报分享
本作品采用 知识共享署名 4.0 国际许可协议 进行许可
标签: 小程序
最后更新:2020年10月14日

读心悦

自己从事开发也有一段时间了,总有一些迷茫,对未来有一点恐惧,不知道以后会不会继续从事开发的岗位。无论未来做出怎样的选择,这个网站就记录一下从事开发这段时间的一些笔记、阅读笔记吧,好歹也给自己留个纪念吧,你说呢! 写点代码,读点书,读点心,读点自己!

打赏 点赞
< 上一篇
下一篇 >

文章评论

取消回复

读心悦

自己从事开发也有一段时间了,总有一些迷茫,对未来有一点恐惧,不知道以后会不会继续从事开发的岗位。无论未来做出怎样的选择,这个网站就记录一下从事开发这段时间的一些笔记、阅读笔记吧,好歹也给自己留个纪念吧,你说呢! 写点代码,读点书,读点心,读点自己!

标签聚合
JavaScript vue CSS 随笔 canvas Echarts 悦读 Nginx mysql taro git react hook 小程序 阅读 闲谈 flutter node redux
推荐文章
  1. 微信小程序中for循环里的picker,操作某一个picker 如何改变对应选择的值?
  2. 微信小程序中自定义导航和地图定位
  3. 微信小程序金额输入限制
  4. 小程序全局和局部自定义导航栏样式
分类
  • flutter (11)
  • html/css (23)
  • Javascript (22)
  • Mysql (2)
  • node (2)
  • React (27)
  • vue (1)
  • 小程序 (41)
  • 悦读 (8)
  • 未分类 (2)
  • 读心里话 (9)

COPYRIGHT © 2020 读心悦

黔ICP备20005501号

黔公网安备52011502001078号