参考：https://uniapp.dcloud.io/collocation/pages?id=app-plus 禁止原生导航
1.新建发布页面add-input,在pages里写
2.在index.html写原生导航按钮的监听事件函数
onNavigationBarButtonTap(e){
console.log(JSON.stringify(e));
if(e.index==){
uni.navigateTo({
url: "../add-input"
})
}
}
3.写发布页自定义导航，需要在pages.json配置
1）运行hello-uni-app，查看扩展主件下的NavBar自定义导航栏
2）看源码pages目录下extUI下，nav-bar文件夹下的nav-bar.vue文件
3）需要nav-bar组件
4）查看nva-bar组件，需要引入以下两个组件
import uniStatusBar from "../uni-status-bar/uni-status-bar.vue";
import uniIcons from "../uni-icons/uni-icons.vue";
5)复制三个组件到我们工程组件文件夹
6）写的代码如下
7）查看，为了写中间的所有人可看的下拉选项
代码如下：为了如下效果
uni.showActionSheet({
itemList: changelook,
success: (res)=> {
this.yinshi=changelook[res.tapIndex];
// console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
}
// ,fail: function (res) {
// console.log(res.errMsg);
// }
});
附录1：add-input.vue代码
<template>
<view>
<!-- 自定义导航栏 -->
<uni-nav-bar :statusBar="true" rightText="发布" left-icon="arrowleft" @clickLeft="back" @clickRight="submit">
<view class="u-f-ajc" @tap="changelook">
{{yinshi}}
<view class="icon iconfont icon-xialazhankai"></view>
</view>
</uni-nav-bar>
</view>
</template>
<script>
let changelook=['所有人可见','仅自己可见'];
import uniNavBar from "../../components/uni-nav-bar/uni-nav-bar.vue"
export default {
components:{uniNavBar},
data() {
return {
yinshi: "所有人可见"
}
},
methods: {
back(){
uni.navigateBack({
delta:1
})
},
submit(){
console.log("发布");
},
changelook(){
console.log("隐私");
uni.showActionSheet({
itemList: changelook,
success: (res)=> {
this.yinshi=changelook[res.tapIndex];
// console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
}
// ,fail: function (res) {
// console.log(res.errMsg);
// }
});
}
}
}
</script>
<style>
</style>
附录2：index.vue代码
<template>
<view>
<swiper-tab-head
:tabBars="tabBars"
:tabIndex="tabIndex"
@tabtap="tabtap">
</swiper-tab-head>
<view class="uni-tab-bar">
<swiper class="swiper-box"
:style="{height:swiperheight+'px'}"
:current="tabIndex"
@change="tabChange">
<swiper-item v-for="(items,index) in newslist" :key="index">
<scroll-view scroll-y class="list" @scrolltolower="loadmore(index)">
<template v-if="items.list.length>0">
<!-- 图文列表 -->
<block v-for="(item,index1) in items.list" :key="index1">
<index-list :item="item" :index="index1"></index-list>
</block>
<!-- 上拉加载 -->
<load-more :loadtext="items.loadtext"></load-more>
</template>
<template v-else>
<!-- 无内容默认 -->
<no-thing></no-thing>
</template>
</scroll-view>
</swiper-item>
</swiper>
</view>
</view>
</template>
<script>
import indexList from "../../components/index/index-list.vue";
import swiperTabHead from "../../components/index/swiper-tab-head.vue";
import loadMore from "../../components/common/load-more.vue";
import noThing from "../../components/common/no-thing.vue";
export default {
components:{
indexList,
swiperTabHead,
loadMore,
noThing
},
data() {
return {
swiperheight:500,
tabIndex:0,
tabBars:[
{ name:"关注",id:"guanzhu" },
{ name:"推荐",id:"tuijian" },
{ name:"体育",id:"tiyu" },
{ name:"热点",id:"redian" },
{ name:"财经",id:"caijing" },
{ name:"娱乐",id:"yule" },
],
newslist:[
{
loadtext:"上拉加载更多",
list:[
{
userpic:"../../static/demo/userpic/12.jpg",
username:"昵称",
isguanzhu:false,
title:"我是标题",
type:"img", // img:图文,video:视频
titlepic:"../../static/demo/datapic/11.jpg",
infonum:{
index:0,//0:没有操作，1:顶,2:踩；
dingnum:11,
cainum:11,
},
commentnum:10,
sharenum:10,
},
{
userpic:"../../static/demo/userpic/12.jpg",
username:"昵称",
isguanzhu:true,
title:"我是标题",
type:"video", // img:图文,video:视频
titlepic:"../../static/demo/datapic/11.jpg",
playnum:"20w",
long:"2:47",
infonum:{
index:1,//0:没有操作，1:顶,2:踩；
dingnum:11,
cainum:11,
},
commentnum:10,
sharenum:10,
}
]
},
{
loadtext:"上拉加载更多",
list:[
{
userpic:"../../static/demo/userpic/12.jpg",
username:"昵称",
isguanzhu:false,
title:"我是标题",
type:"img", // img:图文,video:视频
titlepic:"../../static/demo/datapic/11.jpg",
infonum:{
index:0,//0:没有操作，1:顶,2:踩；
dingnum:11,
cainum:11,
},
commentnum:10,
sharenum:10,
},
{
userpic:"../../static/demo/userpic/12.jpg",
username:"昵称",
isguanzhu:true,
title:"我是标题",
type:"video", // img:图文,video:视频
titlepic:"../../static/demo/datapic/11.jpg",
playnum:"20w",
long:"2:47",
infonum:{
index:1,//0:没有操作，1:顶,2:踩；
dingnum:11,
cainum:11,
},
commentnum:10,
sharenum:10,
},
{
userpic:"../../static/demo/userpic/12.jpg",
username:"昵称",
isguanzhu:false,
title:"我是标题",
type:"img", // img:图文,video:视频
titlepic:"../../static/demo/datapic/11.jpg",
infonum:{
index:0,//0:没有操作，1:顶,2:踩；
dingnum:11,
cainum:11,
},
commentnum:10,
sharenum:10,
},
{
userpic:"../../static/demo/userpic/12.jpg",
username:"昵称",
isguanzhu:true,
title:"我是标题",
type:"video", // img:图文,video:视频
titlepic:"../../static/demo/datapic/11.jpg",
playnum:"20w",
long:"2:47",
infonum:{
index:1,//0:没有操作，1:顶,2:踩；
dingnum:11,
cainum:11,
},
commentnum:10,
sharenum:10,
}
]
},
{
loadtext:"上拉加载更多",
list:[
{
userpic:"../../static/demo/userpic/12.jpg",
username:"昵称",
isguanzhu:false,
title:"我是标题",
type:"img", // img:图文,video:视频
titlepic:"../../static/demo/datapic/11.jpg",
infonum:{
index:0,//0:没有操作，1:顶,2:踩；
dingnum:11,
cainum:11,
},
commentnum:10,
sharenum:10,
},
{
userpic:"../../static/demo/userpic/12.jpg",
username:"昵称",
isguanzhu:true,
title:"我是标题",
type:"video", // img:图文,video:视频
titlepic:"../../static/demo/datapic/11.jpg",
playnum:"20w",
long:"2:47",
infonum:{
index:1,//0:没有操作，1:顶,2:踩；
dingnum:11,
cainum:11,
},
commentnum:10,
sharenum:10,
},
{
userpic:"../../static/demo/userpic/12.jpg",
username:"昵称",
isguanzhu:false,
title:"我是标题",
type:"img", // img:图文,video:视频
titlepic:"../../static/demo/datapic/11.jpg",
infonum:{
index:0,//0:没有操作，1:顶,2:踩；
dingnum:11,
cainum:11,
},
commentnum:10,
sharenum:10,
},
{
userpic:"../../static/demo/userpic/12.jpg",
username:"昵称",
isguanzhu:true,
title:"我是标题",
type:"video", // img:图文,video:视频
titlepic:"../../static/demo/datapic/11.jpg",
playnum:"20w",
long:"2:47",
infonum:{
index:1,//0:没有操作，1:顶,2:踩；
dingnum:11,
cainum:11,
},
commentnum:10,
sharenum:10,
}
]
},
{
loadtext:"上拉加载更多",
list:[]
},
{
loadtext:"上拉加载更多",
list:[]
},
{
loadtext:"上拉加载更多",
list:[]
}
],
}
},
onLoad() {
uni.getSystemInfo({
success: (res)=> {
let height=res.windowHeight-uni.upx2px(100)
this.swiperheight=height;
}
});
},
methods: {
// 上拉加载
loadmore(index){
if(this.newslist[index].loadtext!="上拉加载更多"){ return; }
// 修改状态
this.newslist[index].loadtext="加载中...";
// 获取数据
setTimeout(()=> {
//获取完成
let obj={
userpic:"../../static/demo/userpic/12.jpg",
username:"昵称",
isguanzhu:false,
title:"我是标题",
type:"img", // img:图文,video:视频
titlepic:"../../static/demo/datapic/11.jpg",
infonum:{
index:0,//0:没有操作，1:顶,2:踩；
dingnum:11,
cainum:11,
},
commentnum:10,
sharenum:10,
};
this.newslist[index].list.push(obj);
this.newslist[index].loadtext="上拉加载更多";
}, 1000);
// this.newslist[index].loadtext="没有更多数据了";
},
// tabbar点击事件
tabtap(index){
this.tabIndex=index;
},
// 滑动事件
tabChange(e){
this.tabIndex=e.detail.current;
},
// 监听导航栏的按钮事件函数
onNavigationBarButtonTap(e){
console.log(JSON.stringify(e));
switch(e.index){
case 0:
break;
case 1:
uni.navigateTo({
url: "../add-input/add-input"
});
break;
}
},
// 监听搜索框点击事件
onNavigationBarSearchInputClicked() {
uni.navigateTo({
url: '../search/search'
});
}
//......
}
}
</script>
<style>
</style>
附件3：效果图