admin 管理员组

文章数量: 887007

uniapp原生导航实现城市定位和城市切换

效果图


原生导航配置

	{"path": "pages/index/index","style": {"navigationBarTitleText": "首页","app-plus": {"titleNView": {"type": "transparent","searchInput": {"backgroundColor": "rgba(231, 231, 231,.7)","borderRadius": "16px","placeholder": "请输入地址 如：大钟寺",// "disabled": true,"placeholderColor": "#606266"// "autoFocus": true},"buttons": [						{"text": "北京市","fontSize": "14px","width": "auto","select": true,"color": "#303133","float": "left","background": "rgba(0,0,0,0)"}]}}}},

代码实现当前定位

//获取定位getLocation() {console.log(this.$mp, '111111');let platform = uni.getSystemInfoSync().platform;if (platform == 'ios') {plus.geolocation.getCurrentPosition((p) => {// console.log(p, "pppppppppppp")let city = p.address.city// console.log(city, 'city');let pages = getCurrentPages();let page = pages[pages.length - 1];if (city.length > 3) {city = city.substr(0, 3) + '...';}// #ifdef APP-PLUSvar webview = this.$mp.page.$getAppWebview();webview.setTitleNViewButtonStyle(0, {text: city});// 选择的城市，显示到导航栏uni.getStorage({key: 'city',success: (res) => {var webview = this.$mp.page.$getAppWebview();// index: 按钮索引, style {WebviewTitleNViewButtonStyles } webview.setTitleNViewButtonStyle(0, {text: res.data,});// 当前城市不是定位城市，显示切换城市提示if (city !== res.data) {this.showPos = truevar webview = this.$mp.page.$getAppWebview();// index: 按钮索引, style {WebviewTitleNViewButtonStyles } webview.setTitleNViewButtonStyle(0, {text: res.data,});// console.log("pppppppppppp")}},})// #endif// #ifdef H5// h5 临时方案document.getElementsByClassName('uni-btn-icon')[0].innerText = city;// #endif}, () => {// this.$msg('获取位置信息失败')})} else if (platform == 'android') {plus.geolocation.getCurrentPosition((p) => {let city = p.address.city// console.log(city);let pages = getCurrentPages();let page = pages[pages.length - 1];if (city.length > 3) {city = city.substr(0, 3) + '...';}// #ifdef APP-PLUSvar webview = this.$mp.page.$getAppWebview();// index: 按钮索引, style {WebviewTitleNViewButtonStyles } webview.setTitleNViewButtonStyle(0, {text: city,});uni.getStorage({key: 'city',success: (res) => {var webview = this.$mp.page.$getAppWebview();// index: 按钮索引, style {WebviewTitleNViewButtonStyles } webview.setTitleNViewButtonStyle(0, {text: res.data,});if (city !== res.data) {this.showPos = truevar webview = this.$mp.page.$getAppWebview();// index: 按钮索引, style {WebviewTitleNViewButtonStyles } webview.setTitleNViewButtonStyle(0, {text: res.data,});// console.log("pppppppppppp")}},})// #endif// #ifdef H5// h5 临时方案document.getElementsByClassName('uni-btn-icon')[0].innerText = city;// #endif}, () => {// this.$msg('获取位置信息失败')}, {provider: 'baidu'})}},

记得getLocation该方法要在onLoad（）{}生命周期调用一下哦！！！！！！！！！！！！

点击城市跳转路由时，怎样把选择的城市显示到首页？？？？
在选择城市组件中加上以下代码即可，这里用的时uniapp的缓存

uni.setStorage({key: 'city',data: item.cityName,success() {}})uni.getStorage({key: 'city',})

首页拿到缓存数据，渲染到页面即可
把缓存数据写道OnShow（）{}生命周期即可

onShow() {// 替换成选择的城市uni.getStorage({key: 'city',success: (res) => {var webview = this.$mp.page.$getAppWebview();// index: 按钮索引, style {WebviewTitleNViewButtonStyles } webview.setTitleNViewButtonStyle(0, {text: res.data,});}})

本文标签： uniapp原生导航实现城市定位和城市切换

版权声明：本文标题：uniapp原生导航实现城市定位和城市切换 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.freenas.com.cn/jishu/1732355094h1534202.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。