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',
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
})
|