The nested use of the list component and the scroller in Weex, where the header in the list is attached to the top of the screen when it reaches the top of the screen.
<template>
<div>
<list @loadmore="onloading" loadmoreoffset="10">
<refresher @loadingDown="loadingDown"></refresher>
<cell >
<slider class="slider" interval="3000" auto-play="true" v-if="bannerList && bannerList.length > 0">
<div class="frame" v-for="(item,index) in bannerList" :key="index">
<image class="banner_image" :src="item." style="width:750px;height:400px;"></image>
</div>
<indicator class="indicator" v-if="bannerList.list.length > 1"></indicator>
</slider>
</cell>
<header style="margin-bottom:10px">
<scroller scroll-direction="horizontal" class="tab-pager" show-scrollbar="false" style="padding-left:0">
<div class="tab-item" @click="tabChange(i)" v-for="(item, i) in tabTitles" :key="i">
<text class="tab-title" :style="{fontWeight:i == index ? 400 :300 }">{
{
item.title}}</text>
<text class="lineBottom" :style="{backgroundColor:i == index ? '#000' : '#fff'}"></text>
</div>
</scroller>
</header>
<cell v-for="(item, y) in tabList[index]" :key="y" class="recommend_cell" ref="item">
<div class="recommend_item" @click="toBrandList(item.brand_id, item, y)">
<image class="recommend_image" :src="item.image_url" :style="{height:710/(item.width/item.height)+'px'}"></image>
</div>
</cell>
<cell v-if="loading[index] && tabList[index].length > 0">
<div class="more-list">
<text class="loading-over-txt" v-if="allLoadingFinish[index]==false">加载中...</text>
<text class="loading-over-txt" v-if="allLoadingFinish[index]==true">已经全部加载完毕</text>
</div>
</cell>
<cell v-if="empty[index]" :style="{ height: (height - tabStyles.height) + 'px' }">
<empty/>
</cell>
</list>
<loading-fail-page :idCode="backCode" :show="apiBack" @refreshFetch="refreshFetch"></loading-fail-page>
</div>
</template>
<script>
const modal = weex.requireModule('modal');//modal组件
const promptModule = weex.requireModule('promptModule');
export default {
data() {
return {
Version: false,
page:[],
size: 5,
tabList:[],
data:[],
tabTitles:[],
loading:[],
tabStyles: {
bgColor: "#FFFFFF",
titleColor: "#333333",
activeTitleColor: "#1e1e1e",
activeBgColor: "#FFFFFF",
isActiveTitleBold: true,
iconWidth: 0,
iconHeight: 0,
width: 250,
height: 90,
fontSize: 28,
hasActiveBottom: true,
activeBottomColor: "#1e1e1e",
activeBottomHeight: 6,
activeBottomWidth: 50,
textPaddingLeft: 5,
textPaddingRight: 5,
activeBorderRadius:3,
activeBottomBottom:10,
},
supportSlide: false,
isTabView: true,
needSlider: false,
empty:[],
tabArray:[],
allLoadingFinish:[],
index:0, //选中的分类index
titleMaxLength:0, //标题最长length
bannerList:[ {
src: 'https://gd2.alicdn.com/bao/uploaded/i2/T14H1LFwBcXXXXXXXX_!!0-item_pic.jpg'},
{
src: 'https://gd1.alicdn.com/bao/uploaded/i1/TB1PXJCJFXXXXciXFXXXXXXXXXX_!!0-item_pic.jpg'},
{
src: 'https://gd3.alicdn.com/bao/uploaded/i3/TB1x6hYLXXXXXazXVXXXXXXXXXX_!!0-item_pic.jpg'},
{
src: 'https://gd2.alicdn.com/bao/uploaded/i2/T14H1LFwBcXXXXXXXX_!!0-item_pic.jpg'},
{
src: 'https://gd1.alicdn.com/bao/uploaded/i1/TB1PXJCJFXXXXciXFXXXXXXXXXX_!!0-item_pic.jpg'},
{
src: 'https://gd3.alicdn.com/bao/uploaded/i3/TB1x6hYLXXXXXazXVXXXXXXXXXX_!!0-item_pic.jpg'}
],
}
},
methods: {
refreshFetch () {
this.apiBack = false;
this.requestToGetTabTittles();
},
//上拉加载
onloading() {
let _this = this;
if(_this.tabList[_this.index].length < _this.size)return;
_this.page[_this.index]++;
_this.startLoading(_this.index);
},
//下拉刷新
loadingDown() {
this.page[this.index] = 1;
this.empty[this.index] = false;
this.loading[this.index] = false;
this.data = [];
this.startLoading(this.index);
},
tabChange(index) {
var _this = this;
_this.index = index;
_this.empty[index] = false;
_this.loading[index] = false;
if(_this.tabList[index].length==0){
_this.data = [];
_this.startLoading(index);
}
let tab = '';
if (_this.index == 0) {
tab = 'brandHallTabFirst';
} else if (_this.index == 1) {
tab = 'brandHallTabSecond';
} else if (_this.index == 2) {
tab = 'brandHallTabThird';
}
zhuge.track(zhugeApi.brandHall_tab, {
'品牌馆二级页tab': tab});
},
//获取下面的列表数据
startLoading(index) {
var _this = this;
var selectCid = _this.tabArray[index].cid;
//获取列表数据
_this.Get(_this.api().brand_hall_list, {
size: _this.size,
page: _this.page[index],
type: selectCid
}, function (res){
loadingModule.cancel(function (ret) {
});
if (res.data.code != '0') {
//请求数据失败
promptModule.showPrompt({
msg: res.data.msg, type: 'err'});
} else {
if (res.data.data.length == _this.size){
_this.loading[index] = true;
_this.allLoadingFinish[index] = false;
} else {
_this.loading[index] = true;
_this.allLoadingFinish[index] = true;
}
_this.$nextTick(function() {
// for (const arr in res.data.data) {
// _this.data.push(res.data.data[arr]);
// }
_this.$set(_this.tabList, index, res.data.data);
if (_this.tabList[index].length==0)_this.empty[index] = true;else _this.empty[index] = false;
})
}
});
}
},
created: function () {
}
}
</script>
<style scoped>
.indicator {
width: 702px;
height: 40px;
item-color: rgba(0,0,0,0.5);
item-selected-color: #ffffff;
item-size: 12px;
position: absolute;
bottom: 16px;
right: 0px;
}
.line-item{
width: 750px;
height: 1px;
background-color: #e1e1e1;
}
.content_title{
lines:2;
font-size: 28px;
line-height: 34px;
color: #333333;
text-overflow:ellipsis;
}
.content_intro{
width: 402px;
padding-top: 10px;
font-size: 24px;
color: #666666;
lines:2;
text-overflow:ellipsis;
}
.check_details{
font-size: 20px;
color: #bdbdbd;
}
.recommend_item {
width: 750px;
/* height: 300px; */
padding-top: 15px;
padding-bottom: 15px;
flex-direction: row;
justify-content: flex-start;
}
.recommend_image {
width: 710px;
margin-left: 20px;
border-radius: 10px;
}
.right_item-div{
width: 411px;
height: 240px;
margin-left: 30px;
justify-content: flex-start;
}
.parent{
position: absolute;
width: 750px;
background-color: #fff;
left: 0;
right: 0;
}
.list{
width: 750px;
background-color: #fff;
}
.tab-pager-con{
width:750px;
justify-content: center;
align-items: center;
}
.tab-pager{
flex-direction: row;
background-color: #ffffff;
padding-bottom: 24px;
}
.tab-item{
width: 187.5px;
display: inline-block;
justify-content: center;
align-items: center;
position: relative;
background-color: #ffffff;
}
.lineBottom {
width: 48px;
height: 4px;
margin-top: 8px;
}
.tab-title{
font-size:32px;
font-weight:300;
color:#000000;
line-height:44px;
padding-top: 24px;
background-color: #ffffff;
}
.item-container {
width: 750px;
background-color: #FFF;
}
.bgImg {
position: absolute;
left: 175px;
top: 200px;
}
.line {
width: 750px;
height: 1.4px;
background-color: #e2e2e2;
}
.empty_view {
background-color: #ffffff;
}
.more-list {
width: 750px;
height: 100px;
background-color: #fff;
}
.loading-over-txt {
line-height: 100px;
text-align: center;
font-size: 27px;
color: #333333;
}
.content {
width: 750px;
background-color: white;
height: 252px;
}
.goods_content {
width: 750px;
height: 250px;
padding-left: 40px;
padding-right: 40px;
padding-top: 30px;
padding-bottom: 30px;
flex-direction: row;
}
.img {
width: 240px;
height: 190px;
}
.goods_info {
padding-top: 10px;
padding-bottom: 0px;
padding-left: 30px;
}
.goods_name {
lines: 1;
width: 402px;
height: 40px;
line-height: 40px;
font-size: 28px;
color: #333333;
text-overflow:ellipsis;
}
.goods_detail{
margin-top: 10px;
lines: 2;
width: 402px;
height: 70px;
line-height: 35px;
font-size: 24px;
color: #666666;
text-overflow:ellipsis;
}
.see_detail{
margin-top: 38px;
color: #BDBDBD;
font-size: 20px;
}
</style>
Only methods are provided, and specific data is displayed according to the interface return result