关于微信小程序的导航问题

最近在开发微信的小程序地图功能,大致要做成这个样子,用小程序提供的组件好像不能
实现,请问应该怎么做呢
图片说明

3个回答

同求该问题。
我看了别人的做法,是调用外部的程序来实现导航的。小程序内部是无法实现的。请问楼主解决了吗?

参考小程序“出行地图导航”

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
微信小程序导航
自定义数据,会把大写转成小写 data-groupActivityId="{{ item.groupActivityId }}"会转成groupactivityid
微信小程序(导航API)
1.wx.navigateTo(OBJECT)保留当前页面,跳转到应用内的某个页面,使用wx.navigateBack可以返回到原页面。OBJECT 参数说明:示例代码:wx.navigateTo({ url: 'test?id=1' })2.wx.redirectTo(OBJECT)关闭当前页面,跳转到应用内的某个页面。 OBJECT 参数说明:示例代码:wx.redirectTo({
微信小程序地图导航
欢迎使用Markdown编辑器写博客本Markdown编辑器使用StackEdit修改而来,用它写博客,将会带来全新的体验哦: Markdown和扩展Markdown简洁的语法 代码块高亮 图片链接和图片上传 LaTex数学公式 UML序列图和流程图 离线写博客 导入导出Markdown文件 丰富的快捷键 快捷键 加粗 Ctrl + B 斜体 Ctrl + I 引用 Ctrl
微信小程序 之 导航跳转
//跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面wx.switchTab({ url: '../index/index' });//关闭当前页面,跳转其他页面wx.redirectTo({ url: '../index/index' })//保留当前页面,跳转其他页面wx.navigateTo({ url: '../index/inde...
微信小程序-地图导航
功能描述:发布信息的时候选择位置;详情页展示的时候展示位置名称并且可以导航到该位置。 1)选择位置 chooseLocation: function () { let that = this; wx.chooseLocation({ success: function (res) { that.setData({ osscati...
微信小程序----侧滑导航
这次是本章的效果图!(上图)点击左上标的图标,红色的会弹出来,再点一下就可以收回去接下来讲讲如何实现首先想想思路红色和蓝色当然是两块<view>第一次点击红色弹出(就是红色在屏幕外面)第二次点击红色缩回去(也就是那个图标控制的是红色方块移动)以上是第一种思路那么第二种思路呢?对的,相反的第一次点击,相当于蓝色向右缩进第二次点击,蓝色向左移动(红色在蓝色下面)我这里面使用了第二种方法首先...
微信小程序导航坑
在使用wx.navigateTo和wx.redirectTo来跳转页面,控制台不报错,页面也没动静,发现这两个东西不能跳转设置了tabBar的页面。需要使用wx.reLaunch才能跳转
微信小程序-微信小程序-汉字拼音右侧导航
wx_pinyin 汉字拼音右侧导航,支持单击和滑动 touch是计算触摸点是否落在某个字母相对位置的区间范围内,为真则添加样式并改变scroll-into-view的值 项目截图
微信小程序组件_微信小程序导航_小程序navigator(导航)
微信小程序组件_微信小程序导航_小程序navigator(导航) navigator 页面链接。   属性名 类型 默认值 说明 target  String self 在哪个目标上发生跳转,默认当前小程序,可选值self/miniProgram  url String   应用内的跳转链接 open-type Str...
小程序导航的问题
navigator 导航的问题 导航分三种 a.open-type="navigate" 打开新界面 b.open-type="redirect" 在本界面中打开新界面 c.open-type="switchTab" 控制tab页之间的切换 注意: 1. 所有需要跳转链接的界面必须在app.json中注册 2. a, b只能连接非tabBar中注册占用的页面,不能打开url="../index/i
关于微信小程序
----------------------------------- 学号:16341006 [本人学院](http://sdcs.sysu.edu.cn/) ----------------------------------- 目录 什么是微信小程序 如何开发微信小程序 如何评价微信小程序 9月21日,微信小程序正式开启内测。在微信生态下,触手可及、用完即走的微信小程序引起广泛关注。
微信小程序关于this
最近学习微信小程序,发现一个关于this的坑,记录一下: 代码: // pages/post/post-detail/post_detail.js var postsData = require("../../../data/posts-data.js"); Page({ /** * 页面的初始数据 */ data: { postData: {}, co...
微信小程序页面浮动导航的实现
一、前言做复杂的小程序就与web页面的区别原来越小了,一些web页面的功能会被要求添加到微信小程序页面中。二、功能页面在滑动的时候顶部页面导航跟随滑动,当点击导航中的任意一项时返回页面顶部。三、实现wxml代码:<view class='container'> <view class='navigation {{pageVariable.isFloat == true ? "fl...
微信小程序-自定义头部导航
先展示效果: 步骤一: app.json:中添加 "window": { "navigationStyle":"custom" } 步骤二: app.js:获取手机系统信息及导航高度 App({ onLaunch: function (options) { // 获取手机系统信息 wx.getSystemInfo({ success...
微信小程序 swiper滑动导航
微信小程序 swiper滑动导航 (高度可以自适应,我用的是可以的) 效果: 1.wxml <!--pages/message/message.wxml--> <view class="swiper-tab"> <view class="swiper-tab-item {{currentTab==0?'active':''}}" data-curren...
微信小程序自定义头部导航
有时候直接利用微信的导航 样式更改太受限制,所以需要自定义导航组件来实现多彩的导航栏
微信小程序中实现地图导航
<map id="map" longitude="116.715790" latitude="23.362490" markers="{{markers}}" scale="18" style="width: 100%; height: 300px;" bindtap="click"> 以《微信小程序快速开发:视频指导版》第8章微网站中的地图为例,在map.wxml中增加bindtap="c
微信小程序三种类型的导航连接
<view class="nav_item"bindtap="navFn"data-mode="{{item.mode}}"data-index="{{index}}"> <view class="item_img"><imageclass="item_icon"src="{{item.pic_address}}"/></view> <view class="item_text"><text>{{item.columname}}</text></view></view>
微信小程序地图导航集成(PHP)
客户界面 &amp;lt;view class=&quot;page-body&quot;&amp;gt; &amp;lt;view class=&quot;page-section page-section-gap&quot;&amp;gt; &amp;lt;map id=&quot;myMap&quot; style=&quot;width: 100%;height:{{winH}}px;display: {{map==true?'block':'none'}}.
微信小程序学习之路——导航组件
&lt;navigator/&gt;是小程序种的页面链接,其作用和HTML中超链接标签一样,主要控制页面的跳转,&lt;navigator/&gt;属性如下: 由于内容较多,请参考微信官方文档:https://developers.weixin.qq.com/miniprogram/dev/component/navigator.html 实例代码如下: &lt;view class="b...
微信小程序跳转导航页面
wx.switchTab({ url: '../landlord/landlord' })
微信小程序楼层跳跃,滚动导航
scroll-view的滚动有延迟问题, bindscroll滚动函数执行完之后要用另一个函数(onScrollViewScroll)去操作结束时的位置,在这个函数中重新操作节点。 小程序js: Page({ data: { fruits: [ { name: ‘apple’, num: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] }, { name: ‘banana’, nu...
微信小程序----侧滑导航触摸效果
上一节,我写了微信小程序之侧滑导航这节是上一节的升级版!实现触摸效果首先上API:touchstart手指触摸动作开始 touchmove手指触摸后移动 touchcancel手指触摸动作被打断,如来电提醒,弹窗 touchend手指触摸动作结束 tap手指触摸后马上离开 longpress手指触摸后,超过350ms再离开,如果指定了事件回调函数并触发了这个事件,tap事件将不被触发1.5.0lo...
微信小程序中进行地图导航
微信小程序中进行地图导航
微信小程序-右侧浮动导航
微信小程序-右侧浮动导航,微信小程序-右侧浮动导航,微信小程序-右侧浮动导航,微信小程序-右侧浮动导航,
微信小程序-筛选导航-源码
本源码为装修类微信小程序--筛选导航源码,多级导航,装修类的筛选,包括风格,面积,户型。。
微信小程序(四)实战——导航——tabBar
tabBar页面配置前面说到在app.json是配置一些小程序项目的全局配置,可以在某个页面下面的json文件来单独配置该页面所需要的配置。tabBar是在全局app.json里面配置,跟项目页面都需要在全局app.json里面注册一样,tabBar也是里面的一个属性,其中的list数组最上至少配置2个,最多5个,按照其在数组里面的顺序排布。...
微信小程序swiper fraction数字导航
在做小程序的时候,收到的设计图是这样的 一般来说小程序的圆点导航用的比较多,官方文档也介绍了如何改变圆点导航样式,但是如何像swiper4那样将paginationType改为fraction呢。虽然没有像swiper那样有paginationType属性,但是文档中mode参数有一个字段为current 再通过bindchange事件,将当前页数渲染到页面上。 wxml: ...
微信小程序滚动居中导航选项卡
微信小程序头部导航经常会用到选项卡,一个会自动居中的选项卡的体验会比普通的选项卡要好很多。 效果示意图: 被选中的tab会始终居中显示。 利用微信小程序自带的组件scroll-view的scroll-left就很容易实现这个效果。 wxml代码: &amp;lt;!-- 遮罩层 --&amp;gt; &amp;lt;image wx:if=&quot;{{showMaskScroll}}&quot; class=...
微信小程序地图导航代码
微信小程序地图导航代码,经测试,可正常使用。紫署布丁
微信小程序----左滑导航
微信小程序----左滑菜单方案1:左侧导航放在下层,右侧展示放在上层,通过控制上层的滑动,来显示和隐藏左侧导航。
微信小程序day01_09之 小程序私有页面生命周期和导航
文章目录私有生命周期页面的介绍 私有生命周期页面的介绍 私有页面的生命周期函数如下: 生命周期回调函数如下 : : onLoad(Object query) 页面加载时触发。一个页面只会调用一次,可以在 onLoad 的参数中获取打开当前页面路径中的参数。 参数说明 名称 类型 说明 query Object 打开当前页面路径中的参数 onShow() 页面显示/切入前台时触发。 onReady...
微信小程序的问题
[img=https://img-bbs.csdn.net/upload/201804/26/1524748600_782168.png][/img]rnrn// 缓存 wx 接口方法名rn this.instanceSource = rn method: Object.keys(wx)rn rnrn__initMethods() rn rn for (let key in this.instanceSource) rn this.instanceSource[key].forEach((method, index) => rn rn this[method] = (...args) => rn rn // 判断是否为非异步方法或以 wx.on 开头,或以 Sync 结尾的方法rn if (this.noPromiseMethods.indexOf(method) !== -1 || method.substr(0, 2) === 'on' || /\w+Sync$/.test(method)) rn console.log('88888888888888888888')rn console.log(wx[method](...args))rn return wx[method](...args)rn rn rn return this.__defaultRequest(method, ...args)rn rn rn )rn rn.....rnrnrn----------------------------------rnthis[method] = (...args) 这句没看懂,请明白的给指导一下呢,谢谢了rn两个,1是this[method] 2j ...args
微信小程序 问题
1、页面滚动(非scrollview中)时,textarea控件随着滚动,内容悬停(类似fixed效果);真机上出现,模拟器正常。 A:将所在页面的view的高度height:100% 去除,page的 height:100% 去除   2、使用scroll-view时,在ios上会出现响应失效问题, A:关闭滚动,.json 中 &quot;disableScroll&quot;: true,   3、...
微信小程序-微信小程序-v2ex
微信小程序-v2ex 前言 微信小程序 如果还不知道微信小程序的,请这边了解官方文档. 最新版0.9.092300(下载按钮被箭头挡住,需要审查元素找到下载链接),已经可以支持绝大部分api的调试,不需要再破解了。 运行 下载微信开发者工具最新版0.9.092300,创建新项目,导入即可看到运行效果 说明 本人出于兴趣,完成了这个简单的v2ex的微信小程序,只是为了熟悉api,纯粹好玩,欢迎star 由于微信小程序现在正在内测,还有不少问题,因此这个v2ex小程序最新tab内容点击主题会报错 现在代码和样式尚且粗陋,也有一些可待优化地方,因此欢迎有兴趣的同行与我一起继续完善,thx。 如有转载,请注明出处,谢谢! 效果预览: 感谢 v2ex数据api基本上使用了samuel1112的仓库v2er里封装的方法,特此表示感谢
微信小程序-微信小程序:音乐播放器
微信小程序: 音乐播放器 歌曲资源来源于 baidu音乐 截图 TODO 收藏列表 切换上一曲/下一曲
《微信小程序》微信小程序之头条新闻
简介上一篇文章,主要是介绍下微信小程序的开发环境安装和微信组件什么的一些基础的开发内容,所以最近一直在业余找练手的机会。由于之前没有接触过JS,自己学习起来还算是比较的吃力,一点一点的来吧!要持久。先看下效果: 代码已经开源
微信小程序-微信小程序demo
简介 这是微信小程序的demo项目, 练手之作, 对各种常用功能给出示例代码, 希望各位不吝补充. 使用方法 直接clone项目之后导入微信开发者工具即可. 大概是个什么样 一些额外说明 所有例子都是用ES6写的. 如果你有cocos2d-js开发经验, 那么这个项目就是在向cocos2d-js官方demo致敬. 我正在尝试将redux数据流引入微信小程序开发, 如果你有相关经验, 欢迎和我交流. css只能保存之后看效果, 尚没有什么好的调试手段. 开发建议 请注意事件无法绑定参数 下面的代码是无效的:<button type="primary">发送Ajax请求</button> 需要使用下面方法: <button type="primary">发送Ajax请求</button> ... handleBtn(e){ wx.navigateTo({ url: e.target.dataset.url }) }, 联系方式 拉了个qq群: 598632313
微信小程序-微信小程序-日历
微信小程序-日历 说明: 实现日历功能,包括阳历和阴历。 数据接口: 使用本地数据 目录结构: pages — 存放项目页面文件 utils — 存放格式化文件 开发环境: 微信web开发者工具 v0.11.122100 项目截图: https://www.getweapp.com/project?projectId=5892a2dc52e1e8733dc567ea
相关热词 c# 标准差 计算 c#siki第五季 c#入门推荐书 c# 解码海康数据流 c# xml的遍历循环 c# 取 查看源码没有的 c#解决高并发 委托 c#日期转化为字符串 c# 显示问号 c# 字典对象池