微信小程序自定义组件TabLayout（类似于今日头条的滑动菜单）

有了安卓开发经验，自定义微信小程序组件简直易如反掌。
自定义微信小程序的步骤如下：

建立四个文件

分别是逻辑控制js，配置文件json，布局文件wxml，样式文件wxss。
配置文件.json的编写

component参数：说明这个文件夹是组件文件夹；
usingComponents参数：说明该组件是依赖于什么组件的，这里是空的什么都不依赖。
.wxml文件

 <scroll-view  class="scroll-view_H"  scroll-x  bindscroll="_scroll"  scroll-into-view="{{toView}}"  bindscrolltoupper="_beeninTop" bindscrolltolower="_beeninBottom"> 
  <view class="wrap_item"  id='wrap_item_{{idx}}'  wx:for="{{datalist}}" wx:for-index="idx" wx:for-item="item">
       <text  class='indicater_{{item.status}}' data-text="{{item.key}}"  bindtap='_clickindicater'>{{item.key}}</text> 
  </view>
</scroll-view>  

<view class='bottom_dec'></view>

让scrollvview控件绑定：_beeninTop，_beeninBottom，_scroll这三个函数，当满足触发条件的时候触发对应的函数，scroll-into-view="{{toView}}" 该函数功能是让scrollview滚动到指定子视图位置。
4. .js文件的编写
一般最简单的结果包含如下几个控制部分：

Component({
  properties: {
    // 这里定义了innerText属性，属性值可以在组件使用时指定
    innerText: {
      type: String,
      value: 'default value',
    }
  },
  data: {
    // 这里是一些组件内部数据
    someData: {}
  },
  methods: {
    // 这里是一个自定义方法
    customMethod: function(){}
  }
})

将scrollview绑定的事件在js文件中实现，为了能够使得自定义组件的内部事件可以传递到外部引用该自定义组件中，需要在自定义组件的js中调用 this.triggerEvent(“事件函数名A”, data,{});事件函数名A就可以被外部引用该自定义组件的标签中进行绑定。


    //滚动到顶部/左边，会触发 scrolltoupper 事件
    _beeninTop:function(){
      //触发点击回调
      this.triggerEvent("beeninTop", {});
      console.log("已经到了左边尽头了");
    },
    //滚动到底部/右边，会触发 scrolltolower 事件
    _beeninBottom:function(){
      //触发点击回调
      this.triggerEvent("beeninBottom",  {});
      console.log("已经到了右边尽头了");
    },

    _clickindicater: function (event) {
      var view = event.target;
      //获取控件自定义数据
      var text = view.dataset.text;
      console.log("点击了菜单" + text);
      var data = {"key":text};
      for (var i = 0; i < 6; i++) {
        if (this.properties.datalist[i].key == text){
          this.refreshStatus(i);
          break;
        }
      }
          //触发点击回调
      this.triggerEvent("clickindicater", data,{});
    },

外部引用自定义组件

     <scrollmenu
      id="scrollmenu"
      style="width:{{widthpx}}px;"
      bind:clickindicater="clickmenu"
      bind:beeninTop="hasToTop"
      bind:beeninBottom="hasToBottom">
    </scrollmenu>

在外部的js文件中继续定义clickmenu，hasToTop，hasToBottom这三个函数，就可以处理内部自定义标签所传递过来的事件了。在外部的js中定义如下：

/**
 * 以下是scrollmenu事件函数
 */
  hasToTop:function(){
    console.log("到达顶部");
  },
  hasToBottom:function(){
    console.log("到达底部");
  },
  clickmenu:function(e){
    console.log("点击菜单："+e.detail.key);
    for (var i = 0; i < 6; i++) {
      if (this.data.datalist[i].key == e.detail.key) {
        this.setData({
          pageindex: i,
        })
        return;
      }
    }
  },

说一下wxss文件
这个是卡我时间最久的一个问题，微信小程序的scrollview有很多bug，它需要内部view都是display:line-block;而且需要明确每个子view的寛高，scrollview也需要配置
.scroll-view_H{ /* 单行显示,不包裹 */ white-space: nowrap; overflow: hidden; }
意思就是单行显示，超出长度自动隐藏。
外部的wxss文件也需要引入自定义组件的wxss文件，要不然在状态切换的时候找不到wxss样式就会出现布局错乱，这个很容易忽视，因为官方文档上面也没有写需要引入这个文件。@import "../../components/Scrollmenu/scrollmenu.wxss";

最重要的一点就是scrollview如果是上下滑动，那么明确指定高度，如果是左右滑动，那么明确指定宽度，要不然scrollview就会自动扩展长度包裹所有子view，那么就不会滑动了，一般scrollview需要屏幕高度或者是屏幕宽度，但是每个机子的像素又不一样，怎么能指定明确的寛高呢。真是不人性化，这里用了一个很垃圾的办法，就是在引用自定义组件的js文件中，在页面刚刚加载的时候动态设置寛高，style="width:{{widthpx}}px;" 这句话就是设置他的宽度，在外部的js里面是这样的

也就是在回调中设置他的宽度为全屏。
最后代码运行的效果如下：

如果想试着运行的话
源码在这里
最新的版本在这里：
源码在这里

微信小程序自定义组件TabLayout（类似于今日头条的滑动菜单）

猜你喜欢