微信小程序实现tabs标签栏自定义组件

不念不忘少年蓝@ 2021-09-02 03:36 887阅读 0赞

# 效果 #

![在这里插入图片描述][20201012201447658.gif_pic_left]

# 子组件WXML #

# 子组件JS #

Component({ 
      data: { 
        currentIndex: 0, // 当前选中项的索引
        left: '', // 选中项的下划线的位置
        show: false
      },
      properties: { 
        tabList: { 
          type: Array,
          value: []
        }
      },
      observers: { 
        'tabList'(val) { 
          if (val && val.length) { 
            this.changeline()
          }
        }
      },
      methods: { 
        changeTab(e) { 
          let index = e.currentTarget.dataset.index
          let value = e.currentTarget.dataset.value
          this.setData({ 
            currentIndex: e.currentTarget.dataset.index
          })
          // 自定义组件触发事件时，需要使用 triggerEvent 方法，指定事件名、detail对象和事件选项
          // this.triggerEvent(事件名, detail对象, 事件选项)，
          // detail对象可以是基本数据类型值，也可以是一个对象
          this.triggerEvent("getCurrentValue", value)
          this.changeline()
        },
        // 渲染横线位置的方法
        changeline() { 
          let _this = this
          // SelectorQuery.in(Component component): 将选择器的选取范围更改为自定义组件 component 内
          let query = wx.createSelectorQuery().in(this)
          // select() 在当前页面下选择第一个匹配选择器 selector 的节点
          // boundingClientRect() 添加节点的布局位置的查询请求。相对于显示区域，以像素为单位
          query.select(".active").boundingClientRect()
          // SelectorQuery.exec(function callback) 执行所有的请求
          // 请求结果按请求次序构成数组，在callback的第一个参数中返回
          query.exec(function (res) { 
            _this.setData({ 
              left: res && res[0].left + res[0].width / 2 - 10,
              show: true
            })
          })
        }
      }
    })

# 子组件JSON #

{ 
      "component": true,
      "usingComponents": { }
    }

# 子组件WXSS #

.tabs { 
      display: flex;
      flex-direction: row;
      width: 100%;
      height: 80rpx;
      justify-content: space-around;
      position: relative;
      background-color: #fff;
      overflow-x: auto;
      white-space: nowrap;
    }
    
    .tab-text { 
      font-size: 28rpx;
      line-height: 70rpx;
      font-weight: 400;
      text-align: center;
    }
    
    .line { 
      background: #ffaa7f;
      border-radius: 4rpx;
      height: 8rpx;
      width: 40rpx;
      position: absolute;
      bottom: 4rpx;
      transition: all 0.3s linear;
    }
    
    .active { 
      color: #ffaa7f;
      border-color: #ffaa7f;
    }

# 父组件WXML #

# 父组件JS #

//获取应用实例
    const app = getApp()
    
    Page({ 
      data: { 
        // 传入 tabs 组件的数据
        tabList: [
          {  name: '正在热映', type: 1 },
          {  name: '即将上映', type: 0 }
        ]
      },
      /** * 生命周期函数--监听页面加载 */
      onLoad: function (options) { 
        
      },
      /** * 生命周期函数--监听页面显示 */
      onShow: function () { 
    
      },
      // 选择电影上映类型
      handleSwitch(e) { 
        console.log(e) // { name: '即将上映', type: 0}
      },
    })

# 父组件JSON #

{ 
      "navigationBarTitleText": "电影",
      "usingComponents": { 
        "tabs": "../../components/tabs/index"
      }
    }

# 父组件WXSS #

page { 
      background: #f2f2f2;
    }
    .container { 
      width: 100%;
    }
    .switch-tab { 
      width: 100%;
      background: #fff;
      box-shadow: 0rpx 9rpx 9rpx 0rpx rgba(194, 190, 190, 0.5);
      position: fixed;
      top: 0;
      left: 0;
      z-index: 1000;
    }

[20201012201447658.gif_pic_left]: /images/20210813/b1362e4c7e54441aad0aa7f0a0ee1ce9.png