uniapp pages.json 配置
pages.json 基础配置 -下拉刷新 - 原生子窗体 - 原生导航栏。
·
uniapp pages.json 配置 - 下拉刷新 - 原生子窗体 - 原生导航栏
pages.json 基础配置 -下拉刷新 - 原生子窗体 - 原生导航栏
{
"pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
{
"path": "pages/index/index",
"style": {
"navigationStyle": "custom", //取消原生导航栏失效
"enablePullDownRefresh": true, //trun 允许下拉 false 不允许
"app-plus": { //App 平台时的特定样式
"pullToRefresh": { //下拉刷新
"style": "circle", //"circle"——圆圈样式下拉刷新控件样式
"color": "#FFD101" //颜色值格式为"#RRGGBB",仅"circle"样式下拉刷新支持此属性
}
}
}
},
{
"path": "pages/commerce/commerce",
"style": {
"navigationBarTitleText": "好物", //导航栏标题文字内容
"app-plus": { //App 平台时的特定样式
"subNVues": [{ //原生子窗体
"id": "bottons", // 唯一标识
"path": "details/subNVue/bottons", // 页面路径
/*"type": "popup", 这里不需要*/
"style": {
"position": "absolute",
"height": "150rpx",
"bottom": "0rpx"
}
}],
"titleNView": { //导航栏
"type": "transparent", //透明渐变导航栏
"autoBackButton": true, //标题栏控件是否显示左侧返回按钮
"buttons": [{ //自定义按钮
"type": "none",
"background": "rgba(0,0,0,0)", //按钮的背景颜色,仅在标题栏type=transparent时生效
"badgeText": "", //角标文本,最多显示3个字符,超过则显示为...
"fontSrc": "/static/iconfont/iconfont.ttf", //按钮上文字使用的字体文件路径。不支持网络地址,请统一使用本地地址。
"fontSize": "30px",
"text": "\ue618" //原生标题栏增加消息按钮,点击事件可通过页面的 onNavigationBarButtonTap 函数进行监听
}],
"searchInput": { //搜索框配置
"backgroundColor": "#f5f5f5", //背景颜色
"borderRadius": "6px", //输入框圆角
"placeholder": "请输入搜索内容",
"align": "center" //非输入状态下文本的对齐方式。可取值: "left" - 居左对齐; "right" - 居右对齐; "center" - 居中对齐。
},
"backButton": { //自定义返回按钮的样式
"background": "rgba(0,0,0,0)"
},
"coverage": "200px", //标题栏控件变化作用范围
"titleText": "二手房", //标题文字内容
"titleAlign": "left"
}
}
}
},
]
}
vue 文件处理刷新数据
//下拉属性方法
onPullDownRefresh() {
//调用数据方法
this.getHomeData();
//延时调用
setTimeout(function() {
//停止刷新动作
uni.stopPullDownRefresh();
}, 500)
},
vue 文件处理原生导航栏 【按钮点击事件】
//原生导航栏 【按钮点击事件】
onNavigationBarButtonTap(e) {
//获取导航按钮下标
if (e.index == 0) {
//执行行为操作-跳转页面
uni.navigateTo({
url: '/detailspages/message/message'
});
}
},
// #ifdef APP-PLUS
let pages = getCurrentPages();
let page = pages[pages.length - 1];
let currentWebview = page.$getAppWebview();
//修改按钮文本及颜色
currentWebview.setTitleNViewButtonStyle(2, {
text: '\ue613',
color: '#333332'
});
// #endif
vue 抛出数据 subNVue 接收数据
//vue 抛出数据
let that = this;
uni.$emit('page-send', {
proxyUser: that.proxyUser,
detailData: that.detailData,
ossURL: that.ossURL + '/appres/v2/floor.png',
})
//subNVue 中接收数据
let that = this;
//下面的数据是我在vue文件绑定的数据拿到的,写在onLoad事件方法下
uni.$on('page-send', data => {
console.log("监听到了");
that.proxyUser = data.proxyUser;
that.detailData = data.detailData;
that.ossURL = data.ossURL;
console.log(data);
})
更多推荐
已为社区贡献2条内容
所有评论(0)