微信小程序开发——自定义组件开发

原创

已于 2024-07-09 17:08:08 修改 · 1.7k 阅读

21 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #小程序 #微信小程序

于 2024-07-03 07:45:31 首次发布

做好了小程序，发现两个页面的tab样式基本相同，只是个数不同，那能不能提炼成一个公共组件呢？如何抽象，以下咱们来探索“如何开发出一个自定义的小程序组件”！

一、新建组件

新建文件夹components文件夹->新建tabs文件夹->右键->新建Component

建好的组件目录如下：

二、组件编写

组件开发，其实跟我们之前写页面一样，把之前组件的.js、.json、.wxml、.wxss文件拷贝过来即可。

这里具体code如下：

tab.wxml文件：

<!--components/tab.wxml--> 
<view class="swiper-tab"> 
    <view class="swiper-tab-list {
  
  {currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">商业贷款</view> 
    <view class="swiper-tab-list {
  
  {currentTab==1 ? 'on' : ''}}" data-current="1" bindtap="swichNav">公积金贷款</view> 
    <view class="swiper-tab-list {
  
  {currentTab==2 ? 'on' : ''}}" data-current="2" bindtap="swichNav">组合贷款</view> 
</view>

tab.js文件

// components/tab.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    tabTitles: {
        type: Array,
        value: []
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    currentTab: 0
  },

  /**
   * 组件的方法列表
   */
  methods: {
    //  tab切换逻辑
    swichNav: function( e ) {
        var that = this;
        if( this.data.currentTab === e.target.dataset.current ) {
            return false;
        } else {
            that.setData( {