11 uniapp-动态页面导航条和关注列表开发（导航条，计算可以滚动区域，选项卡竖向滚动联动模板）
11 动态页面导航条和关注列表开发（导航条，计算可以滚动区域，数据联动模板）
一 导航栏tab导航开发
下面代码就开发了个导航条。
<template>
<view>
<uni-nav-bar :border="false" :fixed="true" :statusBar="true" @click-right="openAddInput">
<view class="flex align-center justify-center font-weight-bold w-100">
<view class="mx-1"
@click="changeTab(index)"
:class="tabIndex === index ? 'text-main font-lg':'font-md text-light-muted'"
v-for="(item,index) in tabBars" :key="index">
{{item.name}}
</view>
</view>
<template slot="right">
<text class="iconfont icon-fatie_icon"></text>
</template>
</uni-nav-bar>
</view>
</template>
<script>
import uniNavBar from '@/components/uni-ui/uni-nav-bar/uni-nav-bar.vue'
export default {
components:{
uniNavBar
},
data() {
return {
tabIndex:0,
tabBars:[{
name:"关注"
},{
name:"话题"
}]
}
},
methods: {
changeTab(index){
this.tabIndex = index
},
openAddInput(){
uni.navigateTo({
url:'../add-input/add-input'
})
}
}
}
</script>
<style>
</style>
二 滑动区域计算
1 从之前的index.vue 把swiper相关代码扒下来进行精简测试
<swiper :duration="150" :current="tabIndex" @change="onChangeTab"
:style="'height:'+scrollH+'px'">
<!-- 会默认分配索引 0 1 2 3 4 5 -->
<swiper-item v-for="i in 2" :key="i">
<scroll-view scroll-y="true" :style="'height:'+scrollH+'px;'" >
<view v-for="i in 100" :key="i">
{{i}}
</view>
</scroll-view>
</swiper-item>
</swiper>
onLoad(){
uni.getSystemInfo({
success:res=>{ // 可用屏幕长度理论上（总长-原生导航栏-原生底部栏）当前案例无原生导航栏
// 可用屏幕长度（总长-原生底部栏-原生导航栏0） - 状态栏长度 - 导航栏长度
this.scrollH = res.windowHeight - res.statusBarHeight - 44
console.log(this.scrollH)
}
})
},
methods: {
changeTab(index){
this.tabIndex = index
},
2 选项卡+竖向滚动联动模板
<template>
<view>
<uni-nav-bar :border="false" :fixed="true" :statusBar="true" @click-right="openAddInput">
<view class="flex align-center justify-center font-weight-bold w-100">
<view class="mx-1"
@click="changeTab(index)"
:class="tabIndex === index ? 'text-main font-lg':'font-md text-light-muted'"
v-for="(item,index) in tabBars" :key="index">
{{item.name}}
</view>
</view>
<template slot="right">
<text class="iconfont icon-fatie_icon"></text>
</template>
</uni-nav-bar>
<swiper :duration="150" :current="tabIndex" @change="onChangeTab"
:style="'height:'+scrollH+'px'">
<!-- 会默认分配索引 0 1 2 3 4 5 -->
<swiper-item v-for="i in 2" :key="i">
<scroll-view scroll-y="true" :style="'height:'+scrollH+'px;'" >
<view v-for="i in 100" :key="i">
{{i}}
</view>
</scroll-view>
</swiper-item>
</swiper>
</view>
</template>
<script>
import uniNavBar from '@/components/uni-ui/uni-nav-bar/uni-nav-bar.vue'
export default {
components:{
uniNavBar
},
data() {
return {
tabIndex:0,
tabBars:[{
name:"关注"
},{
name:"话题"
}],
scrollH:500
}
},
onLoad(){
uni.getSystemInfo({
success:res=>{ // 可用屏幕长度理论上（总长-原生导航栏-原生底部栏）当前案例无原生导航栏
// 可用屏幕长度（总长-原生底部栏） - 状态栏长度 - 导航栏长度
this.scrollH = res.windowHeight - res.statusBarHeight - 44
console.log(this.scrollH)
}
})
},
methods: {
changeTab(index){
this.tabIndex = index
},
openAddInput(){
uni.navigateTo({
url:'../add-input/add-input'
})
},
onChangeTab(e){
this.tabIndex = e.detail.current
}
},
}
</script>
<style>
</style>
3 添加数据实现联动效果(基于上个标题的模板进行数据渲染)
效果图：
<template>
<view>
<uni-nav-bar :border="false" :fixed="true" :statusBar="true" @click-right="openAddInput">
<view class="flex align-center justify-center font-weight-bold w-100">
<view class="mx-1"
@click="changeTab(index)"
:class="tabIndex === index ? 'text-main font-lg':'font-md text-light-muted'"
v-for="(item,index) in tabBars" :key="index">
{{item.name}}
</view>
</view>
<template slot="right">
<text class="iconfont icon-fatie_icon"></text>
</template>
</uni-nav-bar>
<swiper :duration="150" :current="tabIndex" @change="onChangeTab"
:style="'height:'+scrollH+'px'">
<!-- 关注 -->
<!-- 会默认分配索引 0 1 2 3 4 5 -->
<swiper-item>
<scroll-view scroll-y="true" :style="'height:'+scrollH+'px;'" >
<view v-for="(item,index) in list" :key="index">
<common-list :item="item" :index="index"></common-list>
<divider></divider>
</view>
</scroll-view>
</swiper-item>
<!-- 话题 -->
<swiper-item>
<scroll-view scroll-y="true" :style="'height:'+scrollH+'px;'" >
<view>
</view>
</scroll-view>
</swiper-item>
</swiper>
</view>
</template>
<script>
const demo = [{
username:"昵称",
userpic:"/static/default.jpg",
newstime:"2019-10-20 下午04:30",
isFollow:true,
title:"我是标题",
titlepic:"/static/demo/datapic/11.jpg",
support:{
type:"support", // 顶
support_count:1,
unsupport_count:2
},
comment_count:2,
share_num:2
},
{
username:"昵称",
userpic:"/static/default.jpg",
newstime:"2019-10-20 下午04:30",
isFollow:true,
title:"我是标题",
titlepic:"",
support:{
type:"unsupport", // 踩
support_count:1,
unsupport_count:2
},
comment_count:2,
share_num:2
},
{
username:"昵称",
userpic:"/static/default.jpg",
newstime:"2019-10-20 下午04:30",
isFollow:true,
title:"我是标题",
titlepic:"",
support:{
type:"", // 未操作
support_count:1,
unsupport_count:2
},
comment_count:2,
share_num:2
}];
import uniNavBar from '@/components/uni-ui/uni-nav-bar/uni-nav-bar.vue'
import commonList from '@/components/common/common-list.vue'
export default {
components:{
uniNavBar,
commonList
},
data() {
return {
tabIndex:0,
tabBars:[{
name:"关注"
},{
name:"话题"
}],
scrollH:500,
list:[]
}
},
onLoad(){
uni.getSystemInfo({
success:res=>{ // 可用屏幕长度理论上（总长-原生导航栏-原生底部栏）当前案例无原生导航栏
// 可用屏幕长度（总长-原生底部栏） - 状态栏长度 - 导航栏长度
this.scrollH = res.windowHeight - res.statusBarHeight - 44
console.log(this.scrollH)
}
})
// 加载测试数据
this.list = demo
},
methods: {
changeTab(index){
this.tabIndex = index
},
openAddInput(){
uni.navigateTo({
url:'../add-input/add-input'
})
},
onChangeTab(e){
this.tabIndex = e.detail.current
}
},
}
</script>
<style>
</style>
4 完善上标题的页面（完善点赞点踩）
<template>
<view>
<uni-nav-bar :border="false" :fixed="true" :statusBar="true" @click-right="openAddInput">
<view class="flex align-center justify-center font-weight-bold w-100">
<view class="mx-1" @click="changeTab(index)" :class="tabIndex === index ? 'text-main font-lg':'font-md text-light-muted'"
v-for="(item,index) in tabBars" :key="index">
{{item.name}}
</view>
</view>
<template slot="right">
<text class="iconfont icon-fatie_icon"></text>
</template>
</uni-nav-bar>
<swiper :duration="150" :current="tabIndex" @change="onChangeTab" :style="'height:'+scrollH+'px'">
<!-- 关注 -->
<!-- 会默认分配索引 0 1 2 3 4 5 -->
<swiper-item>
<scroll-view scroll-y="true" :style="'height:'+scrollH+'px;'" @scrolltolower="loadmoreEvent(index)">
<view v-for="(item,index) in list" :key="index">
<common-list :item="item" :index="index" @doSupport="doSupport"></common-list>
<divider></divider>
</view>
<load-more :loadmore="loadmore"></load-more>
</scroll-view>
</swiper-item>
<!-- 话题 -->
<swiper-item>
<scroll-view scroll-y="true" :style="'height:'+scrollH+'px;'">
<view>
</view>
</scroll-view>
</swiper-item>
</swiper>
</view>
</template>
<script>
const demo = [{
username: "昵称",
userpic: "/static/default.jpg",
newstime: "2019-10-20 下午04:30",
isFollow: true,
title: "我是标题",
titlepic: "/static/demo/datapic/11.jpg",
support: {
type: "support", // 顶
support_count: 1,
unsupport_count: 2
},
comment_count: 2,
share_num: 2
},
{
username: "昵称",
userpic: "/static/default.jpg",
newstime: "2019-10-20 下午04:30",
isFollow: true,
title: "我是标题",
titlepic: "",
support: {
type: "unsupport", // 踩
support_count: 1,
unsupport_count: 2
},
comment_count: 2,
share_num: 2
},
{
username: "昵称",
userpic: "/static/default.jpg",
newstime: "2019-10-20 下午04:30",
isFollow: true,
title: "我是标题",
titlepic: "",
support: {
type: "", // 未操作
support_count: 1,
unsupport_count: 2
},
comment_count: 2,
share_num: 2
}
];
import uniNavBar from '@/components/uni-ui/uni-nav-bar/uni-nav-bar.vue'
import commonList from '@/components/common/common-list.vue'
import loadMore from '@/components/common/load-more.vue'
export default {
components: {
uniNavBar,
commonList,
loadMore
},
data() {
return {
tabIndex: 0,
tabBars: [{
name: "关注"
}, {
name: "话题"
}],
scrollH: 500,
list: [],
loadmore:'下拉加载更多'
}
},
onLoad() {
uni.getSystemInfo({
success: res => { // 可用屏幕长度理论上（总长-原生导航栏-原生底部栏）当前案例无原生导航栏
// 可用屏幕长度（总长-原生底部栏） - 状态栏长度 - 导航栏长度
this.scrollH = res.windowHeight - res.statusBarHeight - 44
console.log(this.scrollH)
}
})
// 加载测试数据
this.list = demo
},
methods: {
changeTab(index) {
this.tabIndex = index
},
openAddInput() {
uni.navigateTo({
url: '../add-input/add-input'
})
},
onChangeTab(e) {
this.tabIndex = e.detail.current
},
// 子组件触发的点赞点踩
// 顶踩操作
doSupport(e) {
// 拿到当前队对象
let item = this.list[e.index]
let msg = e.type === 'support' ? '顶' : '踩'
if (item.support.type === '') {
item.support[e.type + '_count']++
} else if (item.support.type === 'support' && e.type === 'unsupport') {
// 顶 -1
item.support.support_count--;
// 踩 +1
item.support.unsupport_count++;
} else if (item.support.type === 'unsupport' && e.type === 'support') {
// 踩 -1
item.support.unsupport_count--;
// 顶 +1
item.support.support_count++;
}
item.support.type = e.type
uni.showToast({
title: msg + '成功'
})
},
// 触发触底事件
loadmoreEvent(index){
// 修改当前加载状态
this.loadmore = '加载中。。。'
// 模拟数据请求
setTimeout(()=>{
// 加载数据
// ... 相当于取出来当前对象可以遍历出来的内容放到了当前对象里面。
// 这个可以粗糙的理解为把合并了两个一摸一样的列表，列表里面原来的内容*2了
this.list = [...this.list,...this.list]
this.loadmore = '上拉加载更多'
},2000)
},
},
}
</script>
<style>
</style>
