Skip to content

Commit d51109a

Browse files
hulinNeilhulinNeil
committed
优化顶部选项卡示例
1 parent 9730639 commit d51109a

2 files changed

Lines changed: 51 additions & 48 deletions

File tree

‎pages/template/tabbar/tabbar.vue‎

Lines changed: 28 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<view class="uni-tab-bar">
33
<scroll-view id="tab-bar" class="uni-swiper-tab" scroll-x :scroll-left="scrollLeft">
44
<view v-for="(tab,index) in tabBars" :key="tab.id" :class="['swiper-tab-list',tabIndex==index ? 'active' : '']" :id="tab.id"
5-
:data-current="index" @click="tapTab(index)">{{tab.name}}</view>
5+
:data-current="index" @tap="tapTab">{{tab.name}}</view>
66
</scroll-view>
77
<swiper :current="tabIndex" class="swiper-box" duration="300" @change="changeTab">
88
<swiper-item v-for="(tab,index1) in newsitems" :key="index1">
@@ -11,7 +11,7 @@
1111
<media-list :options="newsitem" @close="close(index1,index2)" @click="goDetail(newsitem)"></media-list>
1212
</block>
1313
<view class="uni-tab-bar-loading">
14-
<uni-load-more :loadingType="tab.loadingType" :contentText="loadingText"></uni-load-more>
14+
{{tab.loadingText}}
1515
</view>
1616
</scroll-view>
1717
</swiper-item>
@@ -20,7 +20,6 @@
2020
</template>
2121
<script>
2222
import mediaList from '@/components/tab-nvue/mediaList.vue';
23-
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
2423
2524
const tpl = {
2625
data0: {
@@ -78,16 +77,10 @@
7877
7978
export default {
8079
components: {
81-
mediaList,
82-
uniLoadMore
80+
mediaList
8381
},
8482
data() {
8583
return {
86-
loadingText: {
87-
contentdown: "上拉显示更多",
88-
contentrefresh: "正在加载...",
89-
contentnomore: "没有更多数据了"
90-
},
9184
scrollLeft: 0,
9285
isClickChange: false,
9386
tabIndex: 0,
@@ -122,7 +115,7 @@
122115
}]
123116
}
124117
},
125-
onLoad: function() {
118+
onLoad() {
126119
this.newsitems = this.randomfn()
127120
},
128121
methods: {
@@ -142,23 +135,24 @@
142135
})
143136
},
144137
loadMore(e) {
145-
this.newsitems[e].loadingType = 1;
146138
setTimeout(() => {
147139
this.addData(e);
148140
}, 1200);
149141
},
150142
addData(e) {
151143
if (this.newsitems[e].data.length > 30) {
152-
this.newsitems[e].loadingType = 2;
144+
this.newsitems[e].loadingText = '没有更多了';
153145
return;
154146
}
155147
for (let i = 1; i <= 10; i++) {
156148
this.newsitems[e].data.push(tpl['data' + Math.floor(Math.random() * 5)]);
157149
}
158-
this.newsitems[e].loadingType = 1;
159150
},
160151
async changeTab(e) {
161-
let index = e.detail.current;
152+
let index = e.target.current;
153+
if(this.newsitems[index].data.length === 0){
154+
this.addData(index)
155+
}
162156
if (this.isClickChange) {
163157
this.tabIndex = index;
164158
this.isClickChange = false;
@@ -186,34 +180,40 @@
186180
},
187181
getElSize(id) { //得到元素的size
188182
return new Promise((res, rej) => {
189-
uni.createSelectorQuery().select('#' + id).fields({
183+
uni.createSelectorQuery().select("#" + id).fields({
190184
size: true,
191185
scrollOffset: true
192186
}, (data) => {
193187
res(data);
194188
}).exec();
195-
});
189+
})
196190
},
197-
async tapTab(index) { //点击tab-bar
198-
if (this.tabIndex === index) {
191+
async tapTab(e) { //点击tab-bar
192+
let tabIndex = e.target.dataset.current;
193+
if(this.newsitems[tabIndex].data.length === 0){
194+
this.addData(tabIndex)
195+
}
196+
if (this.tabIndex === tabIndex) {
199197
return false;
200198
} else {
201199
let tabBar = await this.getElSize("tab-bar"),
202200
tabBarScrollLeft = tabBar.scrollLeft; //点击的时候记录并设置scrollLeft
203201
this.scrollLeft = tabBarScrollLeft;
204202
this.isClickChange = true;
205-
this.tabIndex = index;
203+
this.tabIndex = tabIndex;
206204
}
207205
},
208206
randomfn() {
209207
let ary = [];
210208
for (let i = 0, length = this.tabBars.length; i < length; i++) {
211209
let aryItem = {
212-
loadingType: 0,
210+
loadingText: '加载更多...',
213211
data: []
214212
};
215-
for (let j = 1; j <= 10; j++) {
216-
aryItem.data.push(tpl['data' + Math.floor(Math.random() * 5)]);
213+
if(i < 1){
214+
for (let j = 1; j <= 10; j++) {
215+
aryItem.data.push(tpl['data' + Math.floor(Math.random() * 5)]);
216+
}
217217
}
218218
ary.push(aryItem);
219219
}
@@ -224,10 +224,9 @@
224224
</script>
225225

226226
<style>
227-
/* #ifdef MP-ALIPAY */
228-
.swiper-tab-list {
229-
display: inline-block;
227+
.uni-tab-bar-loading{
228+
text-align: center;
229+
font-size: 28upx;
230+
color: #999;
230231
}
231-
232-
/* #endif */
233-
</style>
232+
</style>

‎platforms/app-plus/tabbar/tabbar.vue‎

Lines changed: 23 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
<media-list :options="newsitem" @close="close(index1,index2)" @click="goDetail(newsitem)"></media-list>
1212
</block>
1313
<view class="uni-tab-bar-loading">
14-
<uni-load-more :loadingType="tab.loadingType" :contentText="loadingText"></uni-load-more>
14+
{{tab.loadingText}}
1515
</view>
1616
</scroll-view>
1717
</swiper-item>
@@ -20,7 +20,6 @@
2020
</template>
2121
<script>
2222
import mediaList from '@/components/tab-nvue/mediaList.vue';
23-
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
2423
2524
const tpl = {
2625
data0: {
@@ -78,16 +77,10 @@
7877
7978
export default {
8079
components: {
81-
mediaList,
82-
uniLoadMore
80+
mediaList
8381
},
8482
data() {
8583
return {
86-
loadingText: {
87-
contentdown: "上拉显示更多",
88-
contentrefresh: "正在加载...",
89-
contentnomore: "没有更多数据了"
90-
},
9184
scrollLeft: 0,
9285
isClickChange: false,
9386
tabIndex: 0,
@@ -122,7 +115,7 @@
122115
}]
123116
}
124117
},
125-
onLoad: function() {
118+
onLoad() {
126119
this.newsitems = this.randomfn()
127120
},
128121
methods: {
@@ -142,23 +135,24 @@
142135
})
143136
},
144137
loadMore(e) {
145-
this.newsitems[e].loadingType = 1;
146138
setTimeout(() => {
147139
this.addData(e);
148140
}, 1200);
149141
},
150142
addData(e) {
151143
if (this.newsitems[e].data.length > 30) {
152-
this.newsitems[e].loadingType = 2;
144+
this.newsitems[e].loadingText = '没有更多了';
153145
return;
154146
}
155147
for (let i = 1; i <= 10; i++) {
156148
this.newsitems[e].data.push(tpl['data' + Math.floor(Math.random() * 5)]);
157149
}
158-
this.newsitems[e].loadingType = 1;
159150
},
160151
async changeTab(e) {
161152
let index = e.target.current;
153+
if(this.newsitems[index].data.length === 0){
154+
this.addData(index)
155+
}
162156
if (this.isClickChange) {
163157
this.tabIndex = index;
164158
this.isClickChange = false;
@@ -195,25 +189,31 @@
195189
})
196190
},
197191
async tapTab(e) { //点击tab-bar
198-
if (this.tabIndex === e.target.dataset.current) {
192+
let tabIndex = e.target.dataset.current;
193+
if(this.newsitems[tabIndex].data.length === 0){
194+
this.addData(tabIndex)
195+
}
196+
if (this.tabIndex === tabIndex) {
199197
return false;
200198
} else {
201199
let tabBar = await this.getElSize("tab-bar"),
202200
tabBarScrollLeft = tabBar.scrollLeft; //点击的时候记录并设置scrollLeft
203201
this.scrollLeft = tabBarScrollLeft;
204202
this.isClickChange = true;
205-
this.tabIndex = e.target.dataset.current
203+
this.tabIndex = tabIndex;
206204
}
207205
},
208206
randomfn() {
209207
let ary = [];
210208
for (let i = 0, length = this.tabBars.length; i < length; i++) {
211209
let aryItem = {
212-
loadingType: 0,
210+
loadingText: '加载更多...',
213211
data: []
214212
};
215-
for (let j = 1; j <= 10; j++) {
216-
aryItem.data.push(tpl['data' + Math.floor(Math.random() * 5)]);
213+
if(i < 1){
214+
for (let j = 1; j <= 10; j++) {
215+
aryItem.data.push(tpl['data' + Math.floor(Math.random() * 5)]);
216+
}
217217
}
218218
ary.push(aryItem);
219219
}
@@ -224,5 +224,9 @@
224224
</script>
225225

226226
<style>
227-
227+
.uni-tab-bar-loading{
228+
text-align: center;
229+
font-size: 28upx;
230+
color: #999;
231+
}
228232
</style>

0 commit comments

Comments
 (0)