123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475 |
- // components/tabs/tabs.js
- Component({
- /**
- * 组件的属性列表
- */
- properties: {
- titles: {
- type: Array,
- value: [],
- },
- index: {
- type: Number,
- value: 0,
- observer: function (newVal, oldVal) {
- // 属性值变化时执行
- this.setData({
- selectIndex: newVal,
- });
- },
- },
- isCenter: {
- type: Boolean,
- value: false,
- },
- },
- /**
- * 组件的初始数据
- */
- data: {
- selectIndex: 0,
- scrollLeft: 0, //tab标题的滚动条位置
- screenW: 0,
- },
- // 生命周期函数,可以为函数,或一个在methods段中定义的方法名
- attached: function () {
- const _this = this;
- wx.getSystemInfo({
- success: function (res) {
- // 根据 model 进行判断
- _this.data.screenW = res.screenWidth;
- },
- });
- },
- /**
- * 组件的方法列表
- */
- methods: {
- tapAction: function (e) {
- const { currentIndex, currentItem } = e.currentTarget.dataset;
- this.setData({
- selectIndex: currentIndex,
- });
- this.triggerEvent("tab", {
- index: currentIndex,
- item: currentItem,
- });
- if (!this.properties.isCenter) {
- const _x = e.currentTarget.offsetLeft;
- const _offsetLeft = _x - this.data.screenW / 2.0;
- if (this.data.selectIndex > 3 && _offsetLeft > 0) {
- this.setData({
- scrollLeft: _offsetLeft,
- });
- } else {
- this.setData({
- scrollLeft: 0,
- });
- }
- }
- },
- },
- });
|