Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
CoderSmallfan
uni-app
提交
518c2970
U
uni-app
项目概览
CoderSmallfan
/
uni-app
与 Fork 源项目一致
Fork自
DCloud / uni-app
通知
1
Star
1
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
1
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
U
uni-app
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
1
Issue
1
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
518c2970
编写于
10月 30, 2018
作者:
hbcui1984
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
优化顶部选项卡模板,vue/nvue 复用共同的js逻辑和css样式
上级
5bbb21db
变更
8
隐藏空白更改
内联
并排
Showing
8 changed file
with
1241 addition
and
723 deletion
+1241
-723
examples/hello-uniapp/components/tab-nvue/mediaList.nvue
examples/hello-uniapp/components/tab-nvue/mediaList.nvue
+174
-165
examples/hello-uniapp/components/tab-nvue/mediaList.vue
examples/hello-uniapp/components/tab-nvue/mediaList.vue
+187
-0
examples/hello-uniapp/components/tab-nvue/tabContent.nvue
examples/hello-uniapp/components/tab-nvue/tabContent.nvue
+1
-17
examples/hello-uniapp/components/tab-nvue/tabs.nvue
examples/hello-uniapp/components/tab-nvue/tabs.nvue
+83
-81
examples/hello-uniapp/pages/template/tabbar/tabbar.nvue
examples/hello-uniapp/pages/template/tabbar/tabbar.nvue
+270
-0
examples/hello-uniapp/pages/template/tabbar/tabbar.vue
examples/hello-uniapp/pages/template/tabbar/tabbar.vue
+255
-191
examples/hello-uniapp/platforms/app-plus/tabbar-nvue/tabbar-nvue.nvue
...lo-uniapp/platforms/app-plus/tabbar-nvue/tabbar-nvue.nvue
+0
-269
examples/hello-uniapp/platforms/app-plus/tabbar/tabbar.vue
examples/hello-uniapp/platforms/app-plus/tabbar/tabbar.vue
+271
-0
未找到文件。
examples/hello-uniapp/components/tab-nvue/mediaList.nvue
浏览文件 @
518c2970
<template>
<div>
<div class="list-cell" @click="bindClick">
<div class="media-list" v-if="data.title">
<div :class="[isImgRight?'media-image-right':'',isImgLeft?'media-image-left':'']">
<text :class="['media-title',isImgRight||isImgLeft?'media-title2':'']">{{data.title}}</text>
<div v-if="showImg" :class="['image-section',isImgRight?'image-section-right':'',isImgLeft?'image-section-left':'']">
<image :class="['image-list1',isImgRight||isImgLeft?'image-list2':'']" v-if="data.image_url" :src="data.image_url"></image>
<image class="image-list3" v-if="data.image_list" :src="source.url" v-for="(source, i) in data.image_list" :key="i" />
</div>
</div>
<div class="media-foot">
<div class="media-info">
<text class="info-text">{{data.source}}</text>
<text class="info-text">{{data.comment_count}}条评论</text>
<text class="info-text">{{data.datetime}}</text>
</div>
<div class="max-close-view" @click="close">
<div class="close-view"><text class="close">×</text></div>
</div>
</div>
</div>
</div>
</div>
<div>
<div class="list-cell" @click="bindClick">
<div class="media-list" v-if="data.title">
<div :class="[isImgRight?'media-image-right':'',isImgLeft?'media-image-left':'']">
<text :class="['media-title',isImgRight||isImgLeft?'media-title2':'']">{{data.title}}</text>
<div v-if="showImg" :class="['image-section',isImgRight?'image-section-right':'',isImgLeft?'image-section-left':'']">
<image :class="['image-list1',isImgRight||isImgLeft?'image-list2':'']" v-if="data.image_url"
:src="data.image_url"></image>
<image class="image-list3" v-if="data.image_list" :src="source.url" v-for="(source, i) in data.image_list"
:key="i" />
</div>
</div>
<div class="media-foot">
<div class="media-info">
<text class="info-text">{{data.source}}</text>
<text class="info-text">{{data.comment_count}}条评论</text>
<text class="info-text">{{data.datetime}}</text>
</div>
<div class="max-close-view" @click="close">
<div class="close-view"><text class="close">×</text></div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
props: {
data: {
type: Object,
default: {}
}
},
computed: {
isImgRight() {
return this.data.article_type === 2
},
isImgLeft() {
return this.data.article_type === 1
},
showImg() {
return this.data.image_list || this.data.image_url
}
},
methods: {
close(e) {
this.$emit('close');
e.stopPropagation();
},
bindClick() {
this.$emit('click');
}
}
}
export default {
props: {
data: {
type: Object,
default: function(e) {
return {}
}
}
},
computed: {
isImgRight() {
return this.data.article_type === 2
},
isImgLeft() {
return this.data.article_type === 1
},
showImg() {
return this.data.image_list || this.data.image_url
}
},
methods: {
close(e) {
this.$emit('close');
e.stopPropagation();
},
bindClick() {
this.$emit('click');
}
}
}
</script>
<style>
.list-cell {
width: 750px;
padding: 0 30px;
}
.list-cell:active {
background-color: #eeeeee;
}
.media-list {
flex-direction: column;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #c8c7cc;
padding: 20px 0;
}
.media-image-right {
flex-direction: row;
}
.media-image-left {
flex-direction: row-reverse;
}
.media-title {
flex: 1;
}
.media-title {
lines: 3;
text-overflow: ellipsis;
font-size: 32px;
color: #555555;
}
.media-title2 {
flex: 1;
margin-top: 6px;
line-height: 40px;
}
.image-section {
margin-top: 20px;
flex-direction: row;
justify-content: space-between;
}
.image-section-right {
margin-top: 0px;
margin-left: 10px;
width: 225px;
height: 146px;
}
.image-section-left {
margin-top: 0px;
margin-right: 10px;
width: 225px;
height: 146px;
}
.image-list1 {
width: 690px;
height: 481px;
}
.image-list2 {
width: 225px;
height: 146px;
}
.image-list3 {
width: 225px;
height: 146px;
}
.media-info {
flex-direction: row;
}
.info-text {
margin-right: 20px;
color: #999999;
font-size: 28px;
}
.media-foot {
margin-top: 20px;
flex-direction: row;
justify-content: space-between;
}
.max-close-view{
justify-content:flex-end;
flex-direction: row;
height: 40px;
width: 80px;
}
.close-view {
border-style: solid;
border-width: 1px;
border-color: #999999;
border-radius: 10px;
justify-content: center;
height: 30px;
width: 40px;
}
.close {
text-align: center;
color: #999999;
font-size: 28px;
}
</style>
.list-cell {
width: 750px;
padding: 0 30px;
}
.list-cell:active {
background-color: #eeeeee;
}
.media-list {
flex: 1;
flex-direction: column;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #c8c7cc;
padding: 20px 0;
}
.media-image-right {
flex-direction: row;
}
.media-image-left {
flex-direction: row-reverse;
}
.media-title {
flex: 1;
}
.media-title {
lines: 3;
text-overflow: ellipsis;
font-size: 32px;
color: #555555;
}
.media-title2 {
flex: 1;
margin-top: 6px;
line-height: 40px;
}
.image-section {
margin-top: 20px;
flex-direction: row;
justify-content: space-between;
}
.image-section-right {
margin-top: 0px;
margin-left: 10px;
width: 225px;
height: 146px;
}
.image-section-left {
margin-top: 0px;
margin-right: 10px;
width: 225px;
height: 146px;
}
.image-list1 {
width: 690px;
height: 481px;
}
.image-list2 {
width: 225px;
height: 146px;
}
.image-list3 {
width: 225px;
height: 146px;
}
.media-info {
flex-direction: row;
}
.info-text {
margin-right: 20px;
color: #999999;
font-size: 28px;
}
.media-foot {
margin-top: 20px;
flex-direction: row;
justify-content: space-between;
}
.max-close-view {
align-items: center;
justify-content: flex-end;
flex-direction: row;
height: 40px;
width: 80px;
}
.close-view {
border-style: solid;
border-width: 1px;
border-color: #999999;
border-radius: 10px;
justify-content: center;
height: 30px;
width: 40px;
line-height: 30px;
}
.close {
text-align: center;
color: #999999;
font-size: 28px;
}
</style>
examples/hello-uniapp/components/tab-nvue/mediaList.vue
0 → 100644
浏览文件 @
518c2970
<
template
>
<view>
<view
class=
"list-cell"
hover-class=
"uni-list-cell-hover"
@
click=
"bindClick"
>
<view
class=
"media-list"
v-if=
"data.title"
>
<view
:class=
"[isImgRight?'media-image-right':'',isImgLeft?'media-image-left':'']"
>
<text
:class=
"['media-title',isImgRight||isImgLeft?'media-title2':'']"
>
{{
data
.
title
}}
</text>
<view
v-if=
"showImg"
:class=
"['image-section',isImgRight?'image-section-right':'',isImgLeft?'image-section-left':'']"
>
<image
:class=
"['image-list1',isImgRight||isImgLeft?'image-list2':'']"
v-if=
"data.image_url"
:src=
"data.image_url"
></image>
<image
class=
"image-list3"
v-if=
"data.image_list"
:src=
"source.url"
v-for=
"(source, i) in data.image_list"
:key=
"i"
/>
</view>
</view>
<view
class=
"media-foot"
>
<view
class=
"media-info"
>
<text
class=
"info-text"
>
{{
data
.
source
}}
</text>
<text
class=
"info-text"
>
{{
data
.
comment_count
}}
条评论
</text>
<text
class=
"info-text"
>
{{
data
.
datetime
}}
</text>
</view>
<view
class=
"max-close-view"
@
click.stop=
"close"
>
<view
class=
"close-view"
><text
class=
"close"
>
×
</text></view>
</view>
</view>
</view>
</view>
</view>
</
template
>
<
script
>
export
default
{
props
:
{
data
:
{
type
:
Object
,
default
:
function
(
e
)
{
return
{}
}
}
},
computed
:
{
isImgRight
()
{
return
this
.
data
.
article_type
===
2
},
isImgLeft
()
{
return
this
.
data
.
article_type
===
1
},
showImg
()
{
return
this
.
data
.
image_list
||
this
.
data
.
image_url
}
},
methods
:
{
close
(
e
)
{
this
.
$emit
(
'
close
'
);
e
.
stopPropagation
();
},
bindClick
()
{
this
.
$emit
(
'
click
'
);
}
}
}
</
script
>
<
style
>
view
{
display
:
flex
;
flex-direction
:
column
;
box-sizing
:
border-box
;
}
.list-cell
{
width
:
750
upx
;
padding
:
0
30
upx
;
}
.uni-list-cell-hover
{
background-color
:
#eeeeee
;
}
.media-list
{
flex
:
1
;
flex-direction
:
column
;
border-bottom-width
:
1
upx
;
border-bottom-style
:
solid
;
border-bottom-color
:
#c8c7cc
;
padding
:
20
upx
0
;
}
.media-image-right
{
flex-direction
:
row
;
}
.media-image-left
{
flex-direction
:
row-reverse
;
}
.media-title
{
flex
:
1
;
}
.media-title
{
lines
:
3
;
text-overflow
:
ellipsis
;
font-size
:
32
upx
;
color
:
#555555
;
}
.media-title2
{
flex
:
1
;
margin-top
:
6
upx
;
line-height
:
40
upx
;
}
.image-section
{
margin-top
:
20
upx
;
flex-direction
:
row
;
justify-content
:
space-between
;
}
.image-section-right
{
margin-top
:
0
upx
;
margin-left
:
10
upx
;
width
:
225
upx
;
height
:
146
upx
;
}
.image-section-left
{
margin-top
:
0
upx
;
margin-right
:
10
upx
;
width
:
225
upx
;
height
:
146
upx
;
}
.image-list1
{
width
:
690
upx
;
height
:
481
upx
;
}
.image-list2
{
width
:
225
upx
;
height
:
146
upx
;
}
.image-list3
{
width
:
225
upx
;
height
:
146
upx
;
}
.media-info
{
flex-direction
:
row
;
}
.info-text
{
margin-right
:
20
upx
;
color
:
#999999
;
font-size
:
28
upx
;
}
.media-foot
{
margin-top
:
20
upx
;
flex-direction
:
row
;
justify-content
:
space-between
;
}
.max-close-view
{
align-items
:
center
;
justify-content
:
flex-end
;
flex-direction
:
row
;
height
:
40
upx
;
width
:
80
upx
;
}
.close-view
{
border-style
:
solid
;
border-width
:
1px
;
border-color
:
#999999
;
border-radius
:
10
upx
;
justify-content
:
center
;
height
:
30
upx
;
width
:
40
upx
;
line-height
:
30
upx
;
}
.close
{
text-align
:
center
;
color
:
#999999
;
font-size
:
28
upx
;
}
</
style
>
examples/hello-uniapp/components/tab-nvue/tabContent.nvue
浏览文件 @
518c2970
<script>
export default {
props: {
index: {
type: Number,
default: 0
}
},
data() {
return {
tabIndex:this.index
}
},
watch:{
index(oldV,newV){
console.log(oldV,newV);
}
},
render(createElement) {
return createElement('slider', {
style: {
flex: 1
},
attrs: {
index:
this.tabIndex
,
index:
0
,
infinite: false
}
}, this.$slots.default)
...
...
examples/hello-uniapp/components/tab-nvue/tabs.nvue
浏览文件 @
518c2970
<script>
import tabContent from './tabContent.nvue'
export default {
props: {
index: {
type: Number,
default: 0
}
},
data() {
return {
tabIndex: this.index
}
},
components: {
tabContent,
},
render(createElement) {
const vnodes = this.$slots.default;
const newVNodes = []
if (vnodes && vnodes.length) {
for (let i = 0; i < vnodes.length; i++) {
let vnode = vnodes[i]
if (!vnode || !vnode.componentOptions) {
continue
}
if (vnode.componentOptions.tag === 'tab-content') {
import tabContent from './tabContent.nvue'
export default {
props: {
index: {
type: Number,
default: 0
}
},
data() {
return {
tabIndex: this.index
}
},
components: {
tabContent,
},
render(createElement) {
const vnodes = this.$slots.default;
const newVNodes = []
if (vnodes && vnodes.length) {
for (let i = 0; i < vnodes.length; i++) {
let vnode = vnodes[i]
if (!vnode || !vnode.componentOptions) {
continue
}
if (vnode.componentOptions.tag === 'tab-content') {
const newVNode = createElement('tab-content', {
staticClass: vnode.data.staticClass,
'class':
vnode.data['class'],
style:
vnode.data.style
}, vnode.componentOptions.children)
const newVNode = createElement('tab-content', {
staticClass: vnode.data.staticClass,
'class':
vnode.data['class'],
style:
vnode.data.style
}, vnode.componentOptions.children)
if (!newVNode.data) {
newVNode.data = Object.create(null)
}
if (!newVNode.data.attrs) {
newVNode.data.attrs = Object.create(null)
}
if (!newVNode.data.props) {
newVNode.data.props = Object.create(null)
}
if (!newVNode.data.on) {
newVNode.data.on = Object.create(null)
}
newVNode.data.attrs.index = this.index
newVNode.data.props.index = this.index
newVNode.data.on.change = this._change
newVNodes.push(newVNode)
}
if (vnode.componentOptions.tag === 'tab-bar') {
if (!vnode.componentOptions.listeners) { //监听子元素传递过来的事件
vnode.componentOptions.listeners = Object.create(null)
}
vnode.componentOptions.listeners._tabBarClick = this._tabBarClick;
newVNodes.push(vnode)
}
}
}
var newNode = createElement('div', {
style: {
flex: 1,
flexDirection: 'column'
},
on: {
change2: this._change2
}
}, newVNodes);
return newNode;
},
methods: {
_tabBarClick(e) {
this.tabIndex = e.index;
this.$emit('change', e);
},
_change(e) {
this.tabIndex = e.index;
this.$emit('change', {
index:e.index
})
}
}
}
if (!newVNode.data) {
newVNode.data = Object.create(null)
}
if (!newVNode.data.attrs) {
newVNode.data.attrs = Object.create(null)
}
if (!newVNode.data.props) {
newVNode.data.props = Object.create(null)
}
if (!newVNode.data.on) {
newVNode.data.on = Object.create(null)
}
newVNode.data.attrs.index = this.index
newVNode.data.on.change = this._change
newVNodes.push(newVNode)
}
if (vnode.componentOptions.tag === 'tab-bar') {
if (!vnode.componentOptions.listeners) { //监听子元素传递过来的事件
vnode.componentOptions.listeners = Object.create(null)
}
vnode.componentOptions.listeners._tabBarClick = this._tabBarClick;
newVNodes.push(vnode)
}
}
}
var newNode = createElement('div', {
style: {
flex: 1,
flexDirection: 'column'
},
on: {
change2: this._change2
}
}, newVNodes);
return newNode;
},
methods: {
_tabBarClick(e) {
this.tabIndex = e.index;
this.$emit('change', e);
},
_change(e) {
if (this.tabIndex === e.index) {
return;
}
this.tabIndex = e.index;
this.$emit('change', {
index: e.index
})
}
}
}
</script>
examples/hello-uniapp/pages/template/tabbar/tabbar.nvue
0 → 100644
浏览文件 @
518c2970
<template>
<div>
<tabs @change="changeTab" :index="tabIndex">
<tab-bar>
<div class="tab-bar-item" v-for="(tabBar, t) in tabBars" :key="t" :ref="tabBar.id + t">
<text class="tab-bar-title" :class="[tabIndex === t ? 'active' : '']">{{tabBar.name}}</text>
</div>
</tab-bar>
<tab-content>
<list class="list" @loadmore="loadMore(index1)" loadmoreoffset="10" v-for="(tab,index1) in newsitems"
:key="index1">
<refresh class="refresh" @refresh="onrefresh" @pullingdown="onpullingdown" :display="refreshing ? 'show' : 'hide'">
<text class="refresh-text">{{refreshText}}</text>
</refresh>
<cell v-for="(newsitem,index2) in tab.data" :key="index2">
<media-list :data="newsitem" @close="close(index1,index2)" @click="goDetail(newsitem)"></media-list>
</cell>
<cell class="loadmore">
<text class="loadmore-text">{{tab.loadingText}}</text>
</cell>
</list>
</tab-content>
</tabs>
</div>
</template>
<script>
import tabContent from '@/components/tab-nvue/tabContent.nvue'
import tabBar from '@/components/tab-nvue/tabBar.nvue'
import tabs from '@/components/tab-nvue/tabs.nvue'
import mediaList from '@/components/tab-nvue/mediaList.nvue'
const dom = weex.requireModule('dom')
export default {
components: {
tabContent,
tabBar,
tabs,
mediaList
},
data() {
return {
refreshing: false,
refreshText: "下拉可以刷新",
tabIndex: 0,
newsitems: [],
data0: {
"datetime": "40分钟前",
"article_type": 0,
"title": "uni-app行业峰会频频亮相,开发者反响热烈!",
"source": "DCloud",
"comment_count": 639
},
data1: {
"datetime": "一天前",
"article_type": 1,
"title": "DCloud完成B2轮融资,uni-app震撼发布!",
"image_url": "https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/shuijiao.jpg?imageView2/3/w/200/h/100/q/90",
"source": "DCloud",
"comment_count": 11395
},
data2: {
"datetime": "一天前",
"article_type": 2,
"title": "中国技术界小奇迹:HBuilder开发者突破200万",
"image_url": "https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/muwu.jpg?imageView2/3/w/200/h/100/q/90",
"source": "DCloud",
"comment_count": 11395
},
data4: {
"datetime": "2小时前",
"article_type": 4,
"title": "uni-app 支持原生小程序自定义组件,更开放、更自由",
"image_url": "https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/cbd.jpg?imageView2/3/w/200/h/100/q/90",
"source": "DCloud",
"comment_count": 69
},
data3: {
"article_type": 3,
"image_list": [{
"url": "https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/cbd.jpg?imageView2/3/w/200/h/100/q/90",
"width": 563,
"height": 316
}, {
"url": "https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/muwu.jpg?imageView2/3/w/200/h/100/q/90",
"width": 641,
"height": 360
}, {
"url": "https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/shuijiao.jpg?imageView2/3/w/200/h/100/q/90",
"width": 640,
"height": 360
}],
"datetime": "5分钟前",
"title": "uni-app 支持使用 npm 安装第三方包,生态更趋丰富",
"source": "DCloud",
"comment_count": 11
},
tabBars: [{
name: '关注',
id: 'guanzhu'
}, {
name: '推荐',
id: 'tuijian'
}, {
name: '体育',
id: 'tiyu'
}, {
name: '热点',
id: 'redian'
}, {
name: '财经',
id: 'caijing'
}, {
name: '娱乐',
id: 'yule'
}, {
name: '军事',
id: 'junshi'
}, {
name: '历史',
id: 'lishi'
}, {
name: '本地',
id: 'bendi'
}]
}
},
created() {
setTimeout(() => {
this.newsitems = this.randomfn();
}, 150)
},
methods: {
goDetail(e) {
uni.navigateTo({
url: '/pages/template/tabbar/detail/detail?data=' + e.title
})
},
close(index1, index2) {
uni.showModal({
content: '是否删除本条信息?',
success: (res) => {
if (res.confirm) {
this.newsitems[index1].data.splice(index2, 1);
}
}
})
},
loadMore(e) {
setTimeout(() => {
this.addData(e);
}, 1000);
},
addData(e) {
console.log("加载更多...");
if (this.newsitems[e].data.length > 30) {
this.newsitems[e].loadingText = '没有更多了';
return;
}
for (let i = 1; i <= 10; i++) {
this.newsitems[e].data.push(this['data' + Math.floor(Math.random() * 5)]);
}
},
async changeTab(e) {
this.tabIndex = e.index;
const el = this.$refs[this.tabBars[e.index].id + e.index][0]
let elSize = await this.getElSize(el);
if (elSize.left + elSize.width > 750) {
let index = e.index - 4;
let newEl = this.$refs[this.tabBars[index].id + index][0]
dom.scrollToElement(newEl, {});
return;
}
if (elSize.left < 0) {
dom.scrollToElement(el, {});
}
},
getElSize(el) { //得到元素的size
return new Promise((res, rej) => {
const result = dom.getComponentRect(el, option => {
res(option.size);
})
})
},
randomfn() {
let ary = [];
for (let i = 0, length = this.tabBars.length; i < length; i++) {
let aryItem = {
loadingText: "加载更多...",
data: []
};
for (let j = 1; j <= 10; j++) {
aryItem.data.push(this['data' + Math.floor(Math.random() * 5)]);
}
ary.push(aryItem);
}
return ary;
},
onrefresh(event) {
uni.showToast({
title: "refresh",
icon: "none"
});
this.refreshText = "正在刷新...";
this.refreshing = true;
setTimeout(() => {
console.log("刷新结束")
this.refreshing = false
}, 2000)
},
onpullingdown(event) {
if (this.refreshing) {
return;
}
if (Math.abs(event.pullingDistance) > Math.abs(event.viewHeight)) {
this.refreshText = "释放立即刷新";
} else {
this.refreshText = "下拉可以刷新";
}
}
}
}
</script>
<style>
.tab-bar-item {
width: 150px;
height: 100px;
flex-direction: column;
align-items: center;
justify-content: center;
}
.tab-bar-title {
height: 100px;
line-height: 100px;
font-size: 30px;
color: #555;
}
.active {
color: #007AFF;
}
.loadmore {
height: 70px;
width: 750px;
flex-direction: column;
justify-content: center;
}
.loadmore-text {
font-size: 30px;
text-align: center;
color: #999999;
}
.refresh {
width: 750px;
height: 70px;
flex-direction: row;
align-items: center;
justify-content: center;
}
.refresh-text {
text-align: center;
font-size: 28px;
color: #999999;
}
</style>
examples/hello-uniapp/pages/template/tabbar/tabbar.vue
浏览文件 @
518c2970
<
template
>
<view
class=
"index"
>
<scroll-view
id=
"tab-bar"
class=
"swiper-tab"
scroll-x
:scroll-left=
"scrollLeft"
>
<block
v-for=
"(tab,index) in tabs"
:key=
"tab.id"
>
<view
:class=
"['swiper-tab-list',currentTab==index ? 'on' : '']"
:id=
"tab.id"
:data-current=
"index"
@
tap=
"swichNav
"
>
{{
tab
.
name
}}
</view>
</block
>
</scroll-view
>
<swiper
:current=
"currentTab"
class=
"swiper-box"
duration=
"300"
@
change=
"bindChange
"
>
<block
v-for=
"(tab,index1) in newsitems"
:key=
"index1
"
>
<swiper-item
>
<scroll-view
class=
"index-bd"
scroll-y
@
scrolltolower=
"loadMore(index1)"
>
<block
v-for=
"(newsitem,index2) in tab"
:key=
"index2"
>
<view
class=
"tab-list"
>
{{
newsitem
.
name
}}
-
{{
newsitem
.
label
}}
</view
>
</block
>
</scroll-
view>
</swiper-item
>
</block
>
</swiper>
</view>
<view
class=
"index"
>
<scroll-view
id=
"tab-bar"
class=
"swiper-tab"
scroll-x
:scroll-left=
"scrollLeft"
>
<view
v-for=
"(tab,index) in tabBars"
:key=
"tab.id"
:class=
"['swiper-tab-list',tabIndex==index ? 'active' : '']"
:id=
"tab.id"
:data-current=
"index"
@
tap=
"tapTab
"
>
{{
tab
.
name
}}
</view>
</scroll-view
>
<swiper
:current=
"tabIndex"
class=
"swiper-box"
duration=
"300"
@
change=
"changeTab"
>
<swiper-item
v-for=
"(tab,index1) in newsitems"
:key=
"index1
"
>
<scroll-view
class=
"list"
scroll-y
@
scrolltolower=
"loadMore(index1)
"
>
<block
v-for=
"(newsitem,index2) in tab.data"
:key=
"index2"
>
<media-list
:data=
"newsitem"
@
close=
"close(index1,index2)"
@
click=
"goDetail(newsitem)"
></media-list
>
</block
>
<view
class=
"loadmore"
>
<text
class=
"loadmore-text"
>
{{
tab
.
loadingText
}}
</text
>
</
view>
</scroll-view
>
</swiper-item
>
</swiper>
</view>
</
template
>
<
script
>
export
default
{
data
()
{
return
{
title
:
'
tabbar
'
,
scrollLeft
:
0
,
isClickChange
:
false
,
currentTab
:
0
,
tabs
:
[{
name
:
'
关注
'
,
id
:
'
guanzhu
'
},
{
name
:
'
推荐
'
,
id
:
'
tuijian
'
},
{
name
:
'
体育
'
,
id
:
'
tiyu
'
},
{
name
:
'
热点
'
,
id
:
'
redian
'
},
{
name
:
'
财经
'
,
id
:
'
caijing
'
},
{
name
:
'
娱乐
'
,
id
:
'
yule
'
},
{
name
:
'
军事
'
,
id
:
'
junshi
'
},
{
name
:
'
历史
'
,
id
:
'
lishi
'
},
{
name
:
'
本地
'
,
id
:
'
bendi
'
}],
newsitems
:
[]
}
},
onLoad
:
function
()
{
this
.
newsitems
=
this
.
randomfn
()
},
onUnload
:
function
(){
this
.
scrollLeft
=
0
,
this
.
isClickChange
=
false
,
this
.
currentTab
=
0
;
},
methods
:
{
bindChange
:
async
function
(
e
)
{
let
index
=
e
.
target
.
current
;
if
(
this
.
isClickChange
)
{
this
.
currentTab
=
index
;
this
.
isClickChange
=
false
;
return
;
}
let
tabBar
=
await
this
.
getWidth
(
"
tab-bar
"
),
tabBarScrollLeft
=
tabBar
.
scrollLeft
;
import
mediaList
from
'
@/components/tab-nvue/mediaList.vue
'
export
default
{
components
:
{
mediaList
},
data
()
{
return
{
scrollLeft
:
0
,
isClickChange
:
false
,
tabIndex
:
0
,
newsitems
:
[],
data0
:
{
"
datetime
"
:
"
40分钟前
"
,
"
article_type
"
:
0
,
"
title
"
:
"
uni-app行业峰会频频亮相,开发者反响热烈!
"
,
"
source
"
:
"
DCloud
"
,
"
comment_count
"
:
639
},
data1
:
{
"
datetime
"
:
"
一天前
"
,
"
article_type
"
:
1
,
"
title
"
:
"
DCloud完成B2轮融资,uni-app震撼发布!
"
,
"
image_url
"
:
"
https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/shuijiao.jpg?imageView2/3/w/200/h/100/q/90
"
,
"
source
"
:
"
DCloud
"
,
"
comment_count
"
:
11395
},
data2
:
{
"
datetime
"
:
"
一天前
"
,
"
article_type
"
:
2
,
"
title
"
:
"
中国技术界小奇迹:HBuilder开发者突破200万
"
,
"
image_url
"
:
"
https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/muwu.jpg?imageView2/3/w/200/h/100/q/90
"
,
"
source
"
:
"
DCloud
"
,
"
comment_count
"
:
11395
},
data4
:
{
"
datetime
"
:
"
2小时前
"
,
"
article_type
"
:
4
,
"
title
"
:
"
uni-app 支持原生小程序自定义组件,更开放、更自由
"
,
"
image_url
"
:
"
https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/cbd.jpg?imageView2/3/w/200/h/100/q/90
"
,
"
source
"
:
"
DCloud
"
,
"
comment_count
"
:
69
},
data3
:
{
"
article_type
"
:
3
,
"
image_list
"
:
[{
"
url
"
:
"
https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/cbd.jpg?imageView2/3/w/200/h/100/q/90
"
,
"
width
"
:
563
,
"
height
"
:
316
},
{
"
url
"
:
"
https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/muwu.jpg?imageView2/3/w/200/h/100/q/90
"
,
"
width
"
:
641
,
"
height
"
:
360
},
{
"
url
"
:
"
https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/shuijiao.jpg?imageView2/3/w/200/h/100/q/90
"
,
"
width
"
:
640
,
"
height
"
:
360
}],
"
datetime
"
:
"
5分钟前
"
,
"
title
"
:
"
uni-app 支持使用 npm 安装第三方包,生态更趋丰富
"
,
"
source
"
:
"
DCloud
"
,
"
comment_count
"
:
11
},
tabBars
:
[{
name
:
'
关注
'
,
id
:
'
guanzhu
'
},
{
name
:
'
推荐
'
,
id
:
'
tuijian
'
},
{
name
:
'
体育
'
,
id
:
'
tiyu
'
},
{
name
:
'
热点
'
,
id
:
'
redian
'
},
{
name
:
'
财经
'
,
id
:
'
caijing
'
},
{
name
:
'
娱乐
'
,
id
:
'
yule
'
},
{
name
:
'
军事
'
,
id
:
'
junshi
'
},
{
name
:
'
历史
'
,
id
:
'
lishi
'
},
{
name
:
'
本地
'
,
id
:
'
bendi
'
}]
}
},
onLoad
:
function
()
{
this
.
newsitems
=
this
.
randomfn
()
},
methods
:
{
goDetail
(
e
)
{
uni
.
navigateTo
({
url
:
'
/pages/template/tabbar/detail/detail?data=
'
+
e
.
title
})
},
close
(
index1
,
index2
)
{
uni
.
showModal
({
content
:
'
是否删除本条信息?
'
,
success
:
(
res
)
=>
{
if
(
res
.
confirm
)
{
this
.
newsitems
[
index1
].
data
.
splice
(
index2
,
1
);
}
}
})
},
loadMore
(
e
)
{
setTimeout
(()
=>
{
this
.
addData
(
e
);
},
1000
);
},
addData
(
e
)
{
console
.
log
(
"
加载更多...
"
);
if
(
this
.
newsitems
[
e
].
data
.
length
>
30
)
{
this
.
newsitems
[
e
].
loadingText
=
'
没有更多了
'
;
return
;
}
for
(
let
i
=
1
;
i
<=
10
;
i
++
)
{
this
.
newsitems
[
e
].
data
.
push
(
this
[
'
data
'
+
Math
.
floor
(
Math
.
random
()
*
5
)]);
}
},
async
changeTab
(
e
)
{
let
index
=
e
.
target
.
current
;
if
(
this
.
isClickChange
)
{
this
.
tabIndex
=
index
;
this
.
isClickChange
=
false
;
return
;
}
let
tabBar
=
await
this
.
getElSize
(
"
tab-bar
"
),
tabBarScrollLeft
=
tabBar
.
scrollLeft
;
let
width
=
0
;
let
width
=
0
;
for
(
let
i
=
0
;
i
<
index
;
i
++
)
{
let
result
=
await
this
.
getWidth
(
this
.
tabs
[
i
].
id
);
width
+=
result
.
width
;
}
let
winWidth
=
uni
.
getSystemInfoSync
().
windowWidth
,
nowElement
=
await
this
.
getWidth
(
this
.
tabs
[
index
].
id
),
nowWidth
=
nowElement
.
width
;
if
(
width
+
nowWidth
-
tabBarScrollLeft
>
winWidth
)
{
this
.
scrollLeft
=
width
+
nowWidth
-
winWidth
;
}
if
(
width
<
tabBarScrollLeft
)
{
this
.
scrollLeft
=
width
;
}
this
.
isClickChange
=
false
;
this
.
currentTab
=
index
;
//一旦访问data就会出问题
},
getWidth
:
function
(
id
)
{
//得到元素的宽高
return
new
Promise
((
res
,
rej
)
=>
{
uni
.
createSelectorQuery
().
select
(
"
#
"
+
id
).
fields
({
size
:
true
,
scrollOffset
:
true
},
(
data
)
=>
{
if
(
id
===
'
tab-bar
'
)
{
console
.
log
(
"
id=
"
,
id
,
"
数据:
"
,
data
)
}
res
(
data
);
}).
exec
();
})
},
swichNav
:
async
function
(
e
)
{
//点击tab-bar
if
(
this
.
currentTab
===
e
.
target
.
dataset
.
current
)
{
return
false
;
}
else
{
let
tabBar
=
await
this
.
getWidth
(
"
tab-bar
"
),
tabBarScrollLeft
=
tabBar
.
scrollLeft
;
//点击的时候记录并设置scrollLeft
this
.
scrollLeft
=
tabBarScrollLeft
;
this
.
isClickChange
=
true
;
this
.
currentTab
=
e
.
target
.
dataset
.
current
}
},
loadMore
:
function
(
e
)
{
let
last
=
this
.
newsitems
[
e
][
this
.
newsitems
[
e
].
length
-
1
].
label
,
name
=
this
.
newsitems
[
e
][
this
.
newsitems
[
e
].
length
-
1
].
name
;
for
(
let
i
=
1
;
i
<=
10
;
i
++
)
{
this
.
newsitems
[
e
].
push
({
name
:
name
,
label
:
i
+
last
});
}
},
randomfn
()
{
let
ary
=
[];
for
(
let
i
=
0
,
length
=
this
.
tabs
.
length
;
i
<
length
;
i
++
)
{
let
aryItem
=
[];
for
(
let
j
=
1
;
j
<=
20
;
j
++
)
{
aryItem
.
push
({
name
:
this
.
tabs
[
i
].
name
,
label
:
j
});
}
ary
.
push
(
aryItem
);
}
return
ary
;
}
}
}
for
(
let
i
=
0
;
i
<
index
;
i
++
)
{
let
result
=
await
this
.
getElSize
(
this
.
tabBars
[
i
].
id
);
width
+=
result
.
width
;
}
let
winWidth
=
uni
.
getSystemInfoSync
().
windowWidth
,
nowElement
=
await
this
.
getElSize
(
this
.
tabBars
[
index
].
id
),
nowWidth
=
nowElement
.
width
;
if
(
width
+
nowWidth
-
tabBarScrollLeft
>
winWidth
)
{
this
.
scrollLeft
=
width
+
nowWidth
-
winWidth
;
}
if
(
width
<
tabBarScrollLeft
)
{
this
.
scrollLeft
=
width
;
}
this
.
isClickChange
=
false
;
this
.
tabIndex
=
index
;
//一旦访问data就会出问题
},
getElSize
(
id
)
{
//得到元素的size
return
new
Promise
((
res
,
rej
)
=>
{
uni
.
createSelectorQuery
().
select
(
"
#
"
+
id
).
fields
({
size
:
true
,
scrollOffset
:
true
},
(
data
)
=>
{
res
(
data
);
}).
exec
();
})
},
async
tapTab
(
e
)
{
//点击tab-bar
if
(
this
.
tabIndex
===
e
.
target
.
dataset
.
current
)
{
return
false
;
}
else
{
let
tabBar
=
await
this
.
getElSize
(
"
tab-bar
"
),
tabBarScrollLeft
=
tabBar
.
scrollLeft
;
//点击的时候记录并设置scrollLeft
this
.
scrollLeft
=
tabBarScrollLeft
;
this
.
isClickChange
=
true
;
this
.
tabIndex
=
e
.
target
.
dataset
.
current
}
},
randomfn
()
{
let
ary
=
[];
for
(
let
i
=
0
,
length
=
this
.
tabBars
.
length
;
i
<
length
;
i
++
)
{
let
aryItem
=
{
loadingText
:
"
加载更多...
"
,
data
:
[]
};
for
(
let
j
=
1
;
j
<=
10
;
j
++
)
{
aryItem
.
data
.
push
(
this
[
'
data
'
+
Math
.
floor
(
Math
.
random
()
*
5
)]);
}
ary
.
push
(
aryItem
);
}
return
ary
;
}
}
}
</
script
>
<
style
>
page
{
display
:
flex
;
}
page
{
display
:
flex
;
}
.index
{
display
:
flex
;
flex
:
1
;
flex-direction
:
column
;
overflow
:
hidden
;
height
:
100%
;
}
.index
{
display
:
flex
;
flex
:
1
;
flex-direction
:
column
;
overflow
:
hidden
;
height
:
100%
;
}
.index-bd
{
width
:
750
upx
;
height
:
100%
;
}
.list
{
width
:
750
upx
;
height
:
100%
;
}
.swiper-tab
{
width
:
100%
;
white-space
:
nowrap
;
line-height
:
64
upx
;
height
:
64
upx
;
}
.swiper-tab
{
width
:
100%
;
white-space
:
nowrap
;
line-height
:
100
upx
;
height
:
100
upx
;
border-bottom
:
1px
solid
#c8c7cc
;
}
.swiper-tab-list
{
font-size
:
30
upx
;
width
:
150
upx
;
display
:
inline-block
;
text-align
:
center
;
color
:
#777777
;
}
.swiper-tab-list
{
font-size
:
30
upx
;
width
:
150
upx
;
display
:
inline-block
;
text-align
:
center
;
color
:
#555
;
}
.on
{
color
:
#FF0000
;
border-bottom
:
5
upx
solid
#FF0000
;
}
.active
{
color
:
#007AFF
;
}
.swiper-box
{
flex
:
1
;
width
:
100%
;
height
:
100%
;
}
.swiper-box
{
flex
:
1
;
width
:
100%
;
height
:
calc
(
100%
-
100
upx
)
;
}
.swiper-box
view
{
text-align
:
center
;
}
.loadmore
{
height
:
70
upx
;
width
:
750
upx
;
flex-direction
:
column
;
justify-content
:
center
;
}
.tab-list
{
width
:
100%
;
height
:
90
upx
;
line-height
:
90
upx
;
text-align
:
left
;
border-bottom
:
2
upx
solid
#EFEFF4
;
}
</
style
>
.loadmore-text
{
font-size
:
30
upx
;
text-align
:
center
;
color
:
#999999
;
}
</
style
>
examples/hello-uniapp/platforms/app-plus/tabbar-nvue/tabbar-nvue.nvue
已删除
100644 → 0
浏览文件 @
5bbb21db
<template>
<div>
<tabs @change="changeTab" :index="tabIndex">
<tab-bar>
<div class="tab-bar-item" v-for="(tabBar, t) in tabBars" :key="t" :ref="tabBar.id + t">
<text class="tab-bar-title" :class="[tabIndex === t ? 'active' : '']">{{tabBar.name}}</text>
</div>
</tab-bar>
<tab-content>
<list class="list" @loadmore="loadMore(index1)" loadmoreoffset="10" v-for="(tab,index1) in newsitems" :key="index1">
<refresh class="refresh" @refresh="onrefresh" @pullingdown="onpullingdown" :display="refreshing ? 'show' : 'hide'">
<text class="refresh-text">{{refreshText}}</text>
</refresh>
<cell v-for="(newsitem,index2) in tab.data" :key="index2">
<media-list :data="newsitem" @close="close(index1,index2)"@click="goDetail(newsitem)"></media-list>
</cell>
<cell class="loadmore">
<text class="loadmore-text">{{tab.loadingText}}</text>
</cell>
</list>
</tab-content>
</tabs>
</div>
</template>
<script>
import tabContent from '@/components/tab-nvue/tabContent.nvue'
import tabBar from '@/components/tab-nvue/tabBar.nvue'
import tabs from '@/components/tab-nvue/tabs.nvue'
import mediaList from '@/components/tab-nvue/mediaList.nvue'
const dom = weex.requireModule('dom')
export default {
components: {
tabContent,
tabBar,
tabs,
mediaList
},
created() {
setTimeout(() => {
this.newsitems = this.randomfn();
},150)
},
data() {
return {
refreshing: false,
current_rotate:0,
refreshText:"下拉可以刷新",
tabIndex: 0,
newsitems: [],
data0:{
"datetime": "40分钟前",
"article_type": 0,
"title": "uni-app行业峰会频频亮相,开发者反响热烈!",
"source": "DCloud",
"comment_count": 639
},
data1:{
"datetime": "一天前",
"article_type": 1,
"title": "DCloud完成B2轮融资,uni-app震撼发布!",
"image_url": "https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/shuijiao.jpg?imageView2/3/w/200/h/100/q/90",
"source": "DCloud",
"comment_count": 11395
},
data2:{
"datetime": "一天前",
"article_type": 2,
"title": "中国技术界小奇迹:HBuilder开发者突破200万",
"image_url": "https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/muwu.jpg?imageView2/3/w/200/h/100/q/90",
"source": "DCloud",
"comment_count": 11395
},
data4:{
"datetime": "2小时前",
"article_type": 4,
"title": "uni-app 支持原生小程序自定义组件,更开放、更自由",
"image_url": "https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/cbd.jpg?imageView2/3/w/200/h/100/q/90",
"source": "DCloud",
"comment_count": 69
},
data3:{
"article_type":3,
"image_list": [{
"url": "https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/cbd.jpg?imageView2/3/w/200/h/100/q/90",
"width": 563,
"height": 316
}, {
"url": "https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/muwu.jpg?imageView2/3/w/200/h/100/q/90",
"width": 641,
"height": 360
}, {
"url": "https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/shuijiao.jpg?imageView2/3/w/200/h/100/q/90",
"width": 640,
"height": 360
}],
"datetime": "5分钟前",
"title": "uni-app 支持使用 npm 安装第三方包,生态更趋丰富",
"source": "DCloud",
"comment_count": 11
},
tabBars: [{
name: '关注',
id: 'guanzhu'
}, {
name: '推荐',
id: 'tuijian'
}, {
name: '体育',
id: 'tiyu'
}, {
name: '热点',
id: 'redian'
}, {
name: '财经',
id: 'caijing'
}, {
name: '娱乐',
id: 'yule'
}, {
name: '军事',
id: 'junshi'
}, {
name: '历史',
id: 'lishi'
}, {
name: '本地',
id: 'bendi'
}]
}
},
methods: {
goDetail(e){
uni.navigateTo({
url: './detail?data=' + e.title
})
},
onrefresh(event) {
uni.showToast({
title: "refresh",
icon:"none"
});
this.refreshText = "正在刷新...";
this.refreshing = true;
setTimeout(() => {
console.log("刷新结束")
this.refreshing = false
}, 2000)
},
onpullingdown(event) {
if(this.refreshing){
return;
}
if(Math.abs(event.pullingDistance) > Math.abs(event.viewHeight)){
this.refreshText = "释放立即刷新";
}else{
this.refreshText = "下拉可以刷新";
}
},
loadMore(e) {
setTimeout(() => {
this.addData(e);
}, 1000);
},
addData(e) {
console.log("加载更多...");
if (this.newsitems[e].data.length > 30) {
this.newsitems[e].loadingText = '没有更多了';
return;
}
for (let i = 1; i <= 10; i++) {
this.newsitems[e].data.push(this['data' + Math.floor(Math.random()*5)]);
}
},
close(index1,index2){
uni.showModal({
content: '是否删除本条信息?',
success:(res) => {
if (res.confirm) {
this.newsitems[index1].data.splice(index2,1);
}
}
})
},
async changeTab(e) {
this.tabIndex = e.index;
const el = this.$refs[this.tabBars[e.index].id + e.index][0]
let elSize = await this.getElSize(el);
if (elSize.left + elSize.width > 750) {
let index = e.index - 4;
let newEl = this.$refs[this.tabBars[index].id + index][0]
dom.scrollToElement(newEl, {});
return;
}
if (elSize.left < 0) {
dom.scrollToElement(el, {});
}
},
getElSize(el) { //得到元素的size
return new Promise((res, rej) => {
const result = dom.getComponentRect(el, option => {
res(option.size);
})
})
},
randomfn() {
let ary = [];
for (let i = 0, length = this.tabBars.length; i < length; i++) {
let aryItem = {
loadingText: "加载更多...",
data: []
};
for (let j = 1; j <= 10; j++) {
aryItem.data.push(this['data' + Math.floor(Math.random()*5)]);
}
ary.push(aryItem);
}
return ary;
}
}
}
</script>
<style>
.tab-bar-item {
width: 150px;
height: 100px;
flex-direction: column;
align-items: center;
justify-content: center;
}
.tab-bar-title {
height: 100px;
line-height: 100px;
font-size: 30px;
color: #555;
}
.active {
color: #007AFF;
}
.loadmore {
height: 70px;
width: 750px;
flex-direction: column;
justify-content: center;
}
.loadmore-text {
font-size: 30px;
text-align: center;
color: #999999;
}
.refresh {
width: 750px;
height: 70px;
flex-direction: row;
align-items: center;
justify-content: center;
}
.refresh-text{
text-align: center;
font-size: 28px;
color: #999999;
}
</style>
examples/hello-uniapp/platforms/app-plus/tabbar/tabbar.vue
0 → 100644
浏览文件 @
518c2970
<
template
>
<view
class=
"index"
>
<scroll-view
id=
"tab-bar"
class=
"swiper-tab"
scroll-x
:scroll-left=
"scrollLeft"
>
<view
v-for=
"(tab,index) in tabBars"
:key=
"tab.id"
:class=
"['swiper-tab-list',tabIndex==index ? 'active' : '']"
:id=
"tab.id"
:data-current=
"index"
@
tap=
"tapTab"
>
{{
tab
.
name
}}
</view>
</scroll-view>
<swiper
:current=
"tabIndex"
class=
"swiper-box"
duration=
"300"
@
change=
"changeTab"
>
<swiper-item
v-for=
"(tab,index1) in newsitems"
:key=
"index1"
>
<scroll-view
class=
"list"
scroll-y
@
scrolltolower=
"loadMore(index1)"
>
<block
v-for=
"(newsitem,index2) in tab.data"
:key=
"index2"
>
<media-list
:data=
"newsitem"
@
close=
"close(index1,index2)"
@
click=
"goDetail(newsitem)"
></media-list>
</block>
<view
class=
"loadmore"
>
<text
class=
"loadmore-text"
>
{{
tab
.
loadingText
}}
</text>
</view>
</scroll-view>
</swiper-item>
</swiper>
</view>
</
template
>
<
script
>
import
mediaList
from
'
@/components/tab-nvue/mediaList.vue
'
export
default
{
components
:
{
mediaList
},
data
()
{
return
{
scrollLeft
:
0
,
isClickChange
:
false
,
tabIndex
:
0
,
newsitems
:
[],
data0
:
{
"
datetime
"
:
"
40分钟前
"
,
"
article_type
"
:
0
,
"
title
"
:
"
uni-app行业峰会频频亮相,开发者反响热烈!
"
,
"
source
"
:
"
DCloud
"
,
"
comment_count
"
:
639
},
data1
:
{
"
datetime
"
:
"
一天前
"
,
"
article_type
"
:
1
,
"
title
"
:
"
DCloud完成B2轮融资,uni-app震撼发布!
"
,
"
image_url
"
:
"
https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/shuijiao.jpg?imageView2/3/w/200/h/100/q/90
"
,
"
source
"
:
"
DCloud
"
,
"
comment_count
"
:
11395
},
data2
:
{
"
datetime
"
:
"
一天前
"
,
"
article_type
"
:
2
,
"
title
"
:
"
中国技术界小奇迹:HBuilder开发者突破200万
"
,
"
image_url
"
:
"
https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/muwu.jpg?imageView2/3/w/200/h/100/q/90
"
,
"
source
"
:
"
DCloud
"
,
"
comment_count
"
:
11395
},
data4
:
{
"
datetime
"
:
"
2小时前
"
,
"
article_type
"
:
4
,
"
title
"
:
"
uni-app 支持原生小程序自定义组件,更开放、更自由
"
,
"
image_url
"
:
"
https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/cbd.jpg?imageView2/3/w/200/h/100/q/90
"
,
"
source
"
:
"
DCloud
"
,
"
comment_count
"
:
69
},
data3
:
{
"
article_type
"
:
3
,
"
image_list
"
:
[{
"
url
"
:
"
https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/cbd.jpg?imageView2/3/w/200/h/100/q/90
"
,
"
width
"
:
563
,
"
height
"
:
316
},
{
"
url
"
:
"
https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/muwu.jpg?imageView2/3/w/200/h/100/q/90
"
,
"
width
"
:
641
,
"
height
"
:
360
},
{
"
url
"
:
"
https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/shuijiao.jpg?imageView2/3/w/200/h/100/q/90
"
,
"
width
"
:
640
,
"
height
"
:
360
}],
"
datetime
"
:
"
5分钟前
"
,
"
title
"
:
"
uni-app 支持使用 npm 安装第三方包,生态更趋丰富
"
,
"
source
"
:
"
DCloud
"
,
"
comment_count
"
:
11
},
tabBars
:
[{
name
:
'
关注
'
,
id
:
'
guanzhu
'
},
{
name
:
'
推荐
'
,
id
:
'
tuijian
'
},
{
name
:
'
体育
'
,
id
:
'
tiyu
'
},
{
name
:
'
热点
'
,
id
:
'
redian
'
},
{
name
:
'
财经
'
,
id
:
'
caijing
'
},
{
name
:
'
娱乐
'
,
id
:
'
yule
'
},
{
name
:
'
军事
'
,
id
:
'
junshi
'
},
{
name
:
'
历史
'
,
id
:
'
lishi
'
},
{
name
:
'
本地
'
,
id
:
'
bendi
'
}]
}
},
onLoad
:
function
()
{
this
.
newsitems
=
this
.
randomfn
()
},
methods
:
{
goDetail
(
e
)
{
uni
.
navigateTo
({
url
:
'
/pages/template/tabbar/detail/detail?data=
'
+
e
.
title
})
},
close
(
index1
,
index2
)
{
uni
.
showModal
({
content
:
'
是否删除本条信息?
'
,
success
:
(
res
)
=>
{
if
(
res
.
confirm
)
{
this
.
newsitems
[
index1
].
data
.
splice
(
index2
,
1
);
}
}
})
},
loadMore
(
e
)
{
setTimeout
(()
=>
{
this
.
addData
(
e
);
},
1000
);
},
addData
(
e
)
{
console
.
log
(
"
加载更多...
"
);
if
(
this
.
newsitems
[
e
].
data
.
length
>
30
)
{
this
.
newsitems
[
e
].
loadingText
=
'
没有更多了
'
;
return
;
}
for
(
let
i
=
1
;
i
<=
10
;
i
++
)
{
this
.
newsitems
[
e
].
data
.
push
(
this
[
'
data
'
+
Math
.
floor
(
Math
.
random
()
*
5
)]);
}
},
async
changeTab
(
e
)
{
let
index
=
e
.
target
.
current
;
if
(
this
.
isClickChange
)
{
this
.
tabIndex
=
index
;
this
.
isClickChange
=
false
;
return
;
}
let
tabBar
=
await
this
.
getElSize
(
"
tab-bar
"
),
tabBarScrollLeft
=
tabBar
.
scrollLeft
;
let
width
=
0
;
for
(
let
i
=
0
;
i
<
index
;
i
++
)
{
let
result
=
await
this
.
getElSize
(
this
.
tabBars
[
i
].
id
);
width
+=
result
.
width
;
}
let
winWidth
=
uni
.
getSystemInfoSync
().
windowWidth
,
nowElement
=
await
this
.
getElSize
(
this
.
tabBars
[
index
].
id
),
nowWidth
=
nowElement
.
width
;
if
(
width
+
nowWidth
-
tabBarScrollLeft
>
winWidth
)
{
this
.
scrollLeft
=
width
+
nowWidth
-
winWidth
;
}
if
(
width
<
tabBarScrollLeft
)
{
this
.
scrollLeft
=
width
;
}
this
.
isClickChange
=
false
;
this
.
tabIndex
=
index
;
//一旦访问data就会出问题
},
getElSize
(
id
)
{
//得到元素的size
return
new
Promise
((
res
,
rej
)
=>
{
uni
.
createSelectorQuery
().
select
(
"
#
"
+
id
).
fields
({
size
:
true
,
scrollOffset
:
true
},
(
data
)
=>
{
res
(
data
);
}).
exec
();
})
},
async
tapTab
(
e
)
{
//点击tab-bar
if
(
this
.
tabIndex
===
e
.
target
.
dataset
.
current
)
{
return
false
;
}
else
{
let
tabBar
=
await
this
.
getElSize
(
"
tab-bar
"
),
tabBarScrollLeft
=
tabBar
.
scrollLeft
;
//点击的时候记录并设置scrollLeft
this
.
scrollLeft
=
tabBarScrollLeft
;
this
.
isClickChange
=
true
;
this
.
tabIndex
=
e
.
target
.
dataset
.
current
}
},
randomfn
()
{
let
ary
=
[];
for
(
let
i
=
0
,
length
=
this
.
tabBars
.
length
;
i
<
length
;
i
++
)
{
let
aryItem
=
{
loadingText
:
"
加载更多...
"
,
data
:
[]
};
for
(
let
j
=
1
;
j
<=
10
;
j
++
)
{
aryItem
.
data
.
push
(
this
[
'
data
'
+
Math
.
floor
(
Math
.
random
()
*
5
)]);
}
ary
.
push
(
aryItem
);
}
return
ary
;
}
}
}
</
script
>
<
style
>
page
{
display
:
flex
;
}
.index
{
display
:
flex
;
flex
:
1
;
flex-direction
:
column
;
overflow
:
hidden
;
height
:
100%
;
}
.list
{
width
:
750
upx
;
height
:
100%
;
}
.swiper-tab
{
width
:
100%
;
white-space
:
nowrap
;
line-height
:
100
upx
;
height
:
100
upx
;
border-bottom
:
1px
solid
#c8c7cc
;
}
.swiper-tab-list
{
font-size
:
30
upx
;
width
:
150
upx
;
display
:
inline-block
;
text-align
:
center
;
color
:
#555
;
}
.active
{
color
:
#007AFF
;
}
.swiper-box
{
flex
:
1
;
width
:
100%
;
height
:
calc
(
100%
-
100
upx
);
}
.loadmore
{
height
:
70
upx
;
width
:
750
upx
;
flex-direction
:
column
;
justify-content
:
center
;
}
.loadmore-text
{
font-size
:
30
upx
;
text-align
:
center
;
color
:
#999999
;
}
</
style
>
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录