// demo.nvue
<template>
<list ref='list' id="pageId" bounce="false" show-scrollbar="false" fixFreezing="true" loadmoreoffset="2" offset-accuracy="2"
@loadmore="loadmore">
<cell>
<view class="" ref="header">
<text style="line-height: 500px;background-color grey;">head</text>
<scroll-view class="nav" scroll-x="true" show-scrollbar="false"
@scroll="scrollLeft = $event.detail.scrollLeft">
<text ref="navItem" :class="['text', {active: index === activeIndex}]"
v-for="(value, index) in navList" @click="activeIndex = index">列表{{index}}</text>
<view class="xian" :style="{left: navXianLeft+'px',width: navXianWidth+'px'}"></view>
</scroll-view>
</view>
<swiper class="swiper" :current="activeIndex" :style="{height: swiperHeight+'px'}" @change="change">
<swiper-item class="swiperItem" v-for="(value, index) in navList" :key="index">
<demoList ref="demoList" :height="swiperHeight" :index="index" :dataList="dataList"></demoList>
</swiper-item>
</swiper>
</cell>
</list>
</template>
<script>
// #ifdef APP-NVUE
const dom = weex.requireModule('dom')
// #endif
import demoList from '@/components/demoList.nvue'
export default {
components: {
demoList
},
data() {
return {
activeIndex: 0,
swiperHeight: 0,
navList: [],
dataList: [],
navXianLeft: 0,
navXianWidth: 0,
scrollLeft: 0
}
},
methods: {
loadmore(){
console.log('loadMore');
this.loadData();
setTimeout(() => {
this.$refs["list"].resetLoadmore();
}, 1000)
},
change: function(event) {
this.activeIndex = event.detail.current;
this.xian()
},
xian: function() { //nav下面的那条线的水平位置调整
dom.getComponentRect(this.$refs.navItem[this.activeIndex], (option) => {
this.navXianLeft = option.size.left + this.scrollLeft
this.navXianWidth = option.size.width
})
},
xiding: function(index) { //吸顶
dom.getComponentRect(this.$refs.header, (option) => {
this.$refs.demoList[index].qiehuan(option.size.height)
})
},
loadData: function(){
dom.getComponentRect(this.$refs.header, (option) => {
this.$refs.demoList[this.activeIndex].setData(new Array(30))
})
},
},
onLoad() {
this.navList = new Array(10)
this.dataList = new Array(30)
this.swiperHeight = uni.getSystemInfoSync().windowHeight
console.log('高度:',this.swiperHeight)
},
onReady() {
this.$nextTick(() => {})
this.xian()
this.xiding(0)
},
watch: {
'activeIndex': function(newValue, oldValue) {
this.$refs.demoList[oldValue].goTop()
this.xiding(newValue)
}
}
}
</script>
<style lang="scss">
.nav {
flex-direction: row;
background-color: #FFF;
.text {
width: 140rpx;
text-align: center;
font-size: 30rpx;
color: rgba(0, 0, 0, 0.5);
line-height: 64rpx;
&.active {
color: #000;
}
}
.xian {
position: absolute;
bottom: 0;
height: 4rpx;
background-color: blue;
}
}
</style>
demoList.nvue
<template>
<waterfall ref="list" bounce="true" show-scrollbar="false" column-count="2" fixFreezing="true" :offset-accuracy="2"
@scroll="scrollY = $event.contentOffset.y" @loadmore="loadmore">
<!-- waterfall 属性说明
bounce = 回弹效果,ios中list嵌套的list(或waterfall),必须设置bounce为true。否则子list无法滚动
fixFreezing = ios才需要配置的,具体作用不详。官方说要配置
show-scrollbar = 显示滚动条
-->
<cell v-for="(value, key) in custorm" :key="key">
<view v-if="key === 0" ref="goTop"></view>
<text class="text">{{index}}=>{{key}}</text>
</cell>
</waterfall>
</template>
<script>
// #ifdef APP-NVUE
const dom = weex.requireModule('dom')
// #endif
export default {
props: {
swiperHeight: Number,
index: Number,
dataList: Array
},
mounted() {
this.custorm = this.dataList;
},
data() {
return {
custorm:[],
}
},
methods: {
qiehuan: function(height) {
this.$refs.list.setSpecialEffects({
id: 'pageId',
headerHeight: height
});
},
setData:function(data){
console.log(data);
this.custorm = this.custorm.concat(data);
console.log(this.custorm.length);
},
goTop: function() {
if (Math.abs(this.scrollY) > 0) {
dom.scrollToElement(this.$refs.goTop[0], {
animated: false //无动画
})
}
},
loadmore(){
// console.log('loadMore');
},
}
}
</script>
<style lang="scss">
.text {
background-color: #ebebeb;
margin-left: 12px;
margin-right: 12px;
margin-top: 12px;
padding: 20px;
background-color: #fff;
border-radius: 5px;
}
</style>
2***@qq.com
- 发布:2023-09-08 17:12
- 更新:2023-09-08 17:15
- 阅读:313
2***@qq.com (作者)
demo.nvue中以组件的形式加载的demoList,demoList内是waterfall,我的工程源码已上传。这里修改loadmoreoffset依然无法正常的上拉加载,必须把界面拉到导航条为止,再上拉,才能触发加载。