最新公告
  • 如遇下载失效问题,请联系在线客服,客服24小内为您解决!立即加入我们
  • 小程序中模板的使用方法-component组件

    小程序开发中,一个项目可能需要在多处页面使用类似的模块,则就可以使用模板,还可以减少代码量。

    小程序中组件化的实现有两种方式:template 模版和Component 组件。这两种方式分别适用于不同的场景。

    1. template模版:主要用于展示,模版中不涉及事件处理,需要处理的事件逻辑放在调用模版的页面中。 一个template 模版,只包含wxml、wxss文件。使用方法:见另一文《小程序中模板的使用方法-template模板》
    2. Component组件:作为一个单独的功能模块,不仅可以包含页面展示还可以包含该模块的事件逻辑处理。像一个页面一样,Component 组件可以包含 wxml、wxss、js、json文件。

    什么是Component组件

    Component像页面一样由wxml、wxss、js和json4个文件组成,且需要把这4个文件放在同一个目录中。与页面不一样的是,Component中的构造函数(也可以称构造器)是Component({}),而页面中的构造函数是Page({})。

    Component组件使用方法

    一、创建组件

    1.在小程序项目中新建一个component文件夹,用来存放项目中所有的自定义组件

    2.在component文件夹下建一个自定义定义组件名的文件,如下列的select,用来存放自定义组件下所有文件

    3.重点,在之前新建的select文件夹右键选择–新建component,一样输入select,这时工具就会自动创建select.js、select.json、select.wxml、select.wxss 四个文件。直接新建空白的四个文件也可以,但是需要配置下组件

    4.配置组件

    实例:微信小程序中没有select下拉选项框,这里选择组件的方式来自定义创建一个select组件。(例子来源网上https://www.jianshu.com/p/3aec33a54d8d)

    select.json
    {
      "component": true,
      "usingComponents": {}
    }
    
    select.js
    Component({
      /**
     1. 组件的属性列表
       */
      properties: {
        selectArray: {
          type: Array,
        },
         // 初始时要展示的内容
        currentText:{
          type:String,
        }
      },
    
      /**
     2. 组件的初始数据
       */
      data: {
        isShow: false, // 初始option不显示
        arrowAnimation: {} // 箭头的动画
      },
    
      /**
     3. 组件的方法列表
       */
      methods: {
        //option的显示与否
        selectToggleAction: function () {
          // 获取当前option显示的状态
          var nowShow = this.data.isShow;
          // 创建动画
          var animation = wx.createAnimation({
            timingFunction: "ease"
          })
          this.animation = animation;
          if (nowShow) {
            animation.rotate(0).step();
            this.setData({
              arrowAnimation: animation.export()
            })
          } else {
            animation.rotate(180).step();
            this.setData({
              arrowAnimation: animation.export()
            })
          }
          this.setData({
            isShow: !nowShow      })
        },
        //设置内容
        selectItemAction: function (e) {
          // 当前option的数据是引入组件的页面传过来的,所以这里获取数据只有通过this.properties
          var nowData = this.properties.selectArray;
          var index = e.target.dataset.index; // 当前点击的索引
          var current_text = nowData[index].name; // 当前点击的内容
          var current_type = nowData[index].type; // 当前点击的内容
          // 再次执行动画,注意这里一定是this.animation来使用动画!!!!!!
          this.animation.rotate(0).step();
          this.setData({
            isShow: false,
            current_text: current_text,
            arrowAnimation: this.animation.export()
          })
          // 内容更新后,需要把更新的数据传输出去
          var nowDate = {
            id: index,
            name: current_text,
            type: current_type      }
          // 这里的 getNowData 要和外部的 bind:getNowData ,名称一定要对应
          this.triggerEvent('getNowData', nowDate);
          console.log("选择之后的current_text", current_text);
        }
      }})
    

    说明:
    1.properties是组件的对外属性,是属性名到属性设置的映射表,属性设置中可包含三个字段, type 表示属性类型、 value 表示属性初始值、 observer 表示属性值被更改时的响应函数。
    2.data 和普通页面的data一样,是组件的内部数据,和 properties 一同用于组件的模版渲染。
    3.methods组件的方法,包括事件响应函数和任意的自定义方法,关于事件响应函数的使用。在这里面获取数据有两种方法:一种是获取data里的数据: this.data.属性名;一种是获取 properties 中的属性值: this.properties.属性名。

    <view class='section-select-box'>
      <view class='select-content' bindtap='selectToggleAction'>
        <view class='select-text'>{{currentText}}</view>
        <image class='select-img' src='../../images/icon_arrow_down.png' animation="{{arrowAnimation}}"></image>
      </view>
    
      <view class='select-list' wx:if="{{isShow}}">
          <view class='select-list-item' wx:for="{{selectArray}}" data-index="{{index}}" wx:key='{{index}}' bindtap='selectItemAction'>{{item.name}}</view>
      </view></view>
    

    说明:
    1.animation方法是为了获取当前点击元素的索引与内容。这里 animation=”{{arrowAnimation}}”是箭头转动的动画效果。
    2.bindtap=’selectToggleAction’ selectToggleAction 方法是控制下拉选项框隐藏和显示的事件。
    3.bindtap=’selectItemAction’ selectItemAction 是下拉选项框选择子项之后,设置内容的事件。
    4.wx:if=”{{isShow}}” isShow是为了控制 option 选项显示与隐藏。

    select.wxss
    .section-select-box {
      margin: 20rpx 30rpx;
      width: 690rpx;}.select-content {
      border: 2rpx solid #e2e2e2;
      border-radius: 10rpx;
      background: white;
      font-size: 34rpx;
      position: relative;
      height: 80rpx;
      line-height: 80rpx;
      padding: 0 10px;}.select-text {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 32rpx;}.select-img {
      position: absolute;
      right: 30rpx;
      top: 10rpx;
      width: 60rpx;
      height: 60rpx;
      transition: all .3s ease;}.select-list {
      background: white;
      width: inherit;
      position: absolute;
      border: 2rpx solid #e2e2e2;
      border-top: none;
      box-sizing: border-box;
      z-index: 3;
      max-height: 160rpx;
      overflow: auto;}.select-list-item {
      height: 30px;
      line-height: 30px;
      border-top: 2rpx solid #e2e2e2;
      padding: 0 10px;
      text-align: left;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 14px;}.select-list-item:first-child{
      border-top: none;}
    

    二、使用组件

    1.在使用组件的页面json中配置,如需要在index中引用,就在index.json中

    {
      "usingComponents": {
        "Select": "/component/select/select"
      }}
    

    2.wxml中引入组件

      <Select class="section-select" select-array='{{selectArray}}' current-text="{{current_text}}" bind:getNowData='getCurrentTextAction'></Select>
    免责需知
    1、本站所有资源均来源于网络收集,一切版权©归原作者所有,请保留原版权信息。
    2、本站分享仅供参考学习和演示,禁止商用,如需商用,请从正规渠道选择购买正版!使用正版!支持正版!维护一个良好的知识产权环境。
    3、内容故是参考与学习,不确保能正常演示,也不包含其中的技术服务。
    4、排除在某个功能上存在有其它的BUG或源码残缺的可能,购买后一率不能退款。
    5、资源下载不含技术服务,需付费安装请联系客服100元/次。
    6、文件储存在网盘,如发现链接或者密码有误,请联系客服。
    7、如果付款后下载不了,请提交工单说明,客服会在24小时内解决,如果解决不了,会为您退款。
    8、侵权反馈邮箱:yutongyuncom@qq.com
    顺风猫 » 小程序中模板的使用方法-component组件

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    找不到素材资源介绍文章里的示例图片?
    对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
    顺风猫
    一个高级程序员模板开发平台