117 lines
2.4 KiB
JavaScript
117 lines
2.4 KiB
JavaScript
Component({
|
||
relations: {
|
||
'../scroller/index': {
|
||
type: 'parent',
|
||
linked() {},
|
||
},
|
||
},
|
||
/**
|
||
* 组件的属性列表
|
||
*/
|
||
properties: {
|
||
list: Array,
|
||
border: {
|
||
type: Boolean,
|
||
value: true,
|
||
},
|
||
text: {
|
||
type: Object,
|
||
value: {
|
||
color: '#333333',
|
||
activeColor: '#d13435',
|
||
},
|
||
},
|
||
background: {
|
||
type: Object,
|
||
value: {
|
||
color: '#333333',
|
||
activeColor: '#d13435',
|
||
},
|
||
},
|
||
navPerView: {
|
||
type: [Number, String],
|
||
value: 4.5,
|
||
observer: function (newVal) {
|
||
this._changeNavPerView(newVal)
|
||
},
|
||
},
|
||
spaceBetween: {
|
||
type: Number,
|
||
value: 0,
|
||
},
|
||
type: {
|
||
type: String,
|
||
value: 'line', //可选 line,round，plain
|
||
},
|
||
active: {
|
||
type: Number,
|
||
value: 0,
|
||
observer: function (newVal) {
|
||
this.setData({
|
||
toView: 'item' + (newVal - 1),
|
||
})
|
||
// console.log(this);
|
||
this._change(newVal)
|
||
},
|
||
},
|
||
},
|
||
data: {
|
||
toView: 'item0',
|
||
navWidth: 0,
|
||
scroll: false,
|
||
index: 0,
|
||
},
|
||
lifetimes: {
|
||
attached: function () {
|
||
// 在组件实例进入页面节点树时执行
|
||
let that = this
|
||
that._changeNavPerView(that.data.navPerView)
|
||
},
|
||
detached: function () {
|
||
// 在组件实例被从页面节点树移除时执行
|
||
},
|
||
},
|
||
pageLifetimes: {
|
||
// 组件所在页面的生命周期函数
|
||
show: function () {},
|
||
hide: function () {},
|
||
resize: function () {},
|
||
},
|
||
methods: {
|
||
_changeNav(e) {
|
||
this.setData({
|
||
active: e.currentTarget.dataset.index,
|
||
})
|
||
},
|
||
_change(index) {
|
||
this.triggerEvent('change', {
|
||
id: this.data.list[index].id,
|
||
})
|
||
},
|
||
_catchTouchMove() {
|
||
return false
|
||
},
|
||
_changeNavPerView(navPerView) {
|
||
let that = this
|
||
wx.createSelectorQuery()
|
||
.in(this)
|
||
.select('.wx-coolui-nav')
|
||
.boundingClientRect()
|
||
.exec(function (res) {
|
||
// console.log(res)
|
||
if (res.length > 0 && res[0]) {
|
||
// console.log(that.data.navPerView)
|
||
that.setData({
|
||
navWidth:
|
||
navPerView === 'auto'
|
||
? 'auto'
|
||
: (res[0].width - that.data.spaceBetween * (navPerView - 1)) /
|
||
navPerView +
|
||
'px',
|
||
})
|
||
}
|
||
})
|
||
},
|
||
},
|
||
})
|