最近在做微信小程序,碰到页面跳转的问题,总结一下页面之间跳转的方式 一.wx.navigateTo(OBJECT) 这是最普遍的一种跳转方式,其官方解释为:“保留当前页面,跳转到应用内的某个页面” 类似于html中的 window.location.href=" "eg: wx.navigateTo({ url: 'test?id=1' })实际效果如下: 小程序中左上角有一个返回箭头,可返回上一个页面 也可以通过方法  wx.navigateBack 返回原页面 二.wx.redir

微信小程序开发:学习笔记[8]——页面跳转及传参 页面跳转 一个小程序拥有多个页面,我们可以通过wx.navigateTo推入一个新的页面.在首页使用2次wx.navigateTo后,页面层级会有三层,我们把这样的一个页面层级称为页面栈. 后续为了表述方便,我们采用这样的方式进行描述页面栈:[ pageA, pageB, pageC ],其中pageA在最底下,pageC在最顶上,也就是用户所看到的界面,需要注意在本书编写的时候,小程序宿主环境限制了这个页面栈的最大层级为10层 ,也就是当页面栈

由于公司项目比较多,我们事业部的微信小程序就在一个分包里.那分包页面要回到主包的首页,该怎么跳转呢,有以下两种方法 wx.switchTab(Object object) 跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面,路径后不能带参数. 此方法跳转的页面必须是在tabBar定义过的页面 wx.switchTab({ url: '/index' }) wx.reLaunch(Object object) 关闭所有页面,打开到应用内的某个页面,路径后面可带参数. wx.reLau

小程序开发过程中经常有这种需求,需要把当前页面数据传递给上一个页面,但是wx.navigateBack()无法传递数据. 一般的办法是把当前页面数据放入本地缓存,上一个页面再从缓存中取出. 除此之外还有一种办法,巧妙利用页面栈. getCurrentPages() 函数用于获取当前页面栈的实例,以数组形式按栈的顺序给出,第一个元素为首页,最后一个元素为当前页面. 重点就在这里,在当前页面拿到上一个页面的实例对象,然后调用该对象的方法完成数据传递. 页面A Page({ data: { name:

背景 在上一章(直击根源:vue项目微信小程序页面跳转web-view不刷新)解决了vue在小程序回退不刷新的问题之后,会引出了一个刷新的页面需要点击返回两次才能返回上一个页面 问题描述 在A页面从B页面带了参数返回之后,A页面会刷新,直接导致了,A页面返回上一个页面需要点击两次,其中点击一次时还是A页面. 解决方案 首先第一个想法就是,设置一下退回按钮直接跳到上一个页面去:,经过资料查找,回退按钮是没有直接触发函数的,也就是说不能直接控制回退的功能. 在寻找资料时,发现可以间接的触发一个unl

需求: 这是一个可横向滚动的导航条,现在要求我,从别的页面reLaunch回到首页这里,刷新页面内容的同时,菜单项要滚动出来 (如果该菜单项不在可视区域),而不是让他被挡住. 代码:<scroll-view class="nav-scroll" scroll-x="{{true}}" nenable-flex="{{true}}" scroll-into-view="{{toView}}" scroll-with-ani

这个系列的上一篇教程,教大家写了一个最简单的 Hello world 微信小程序. 但是,那只是一个裸页面,并不好看.今天接着往下讲,如何为这个页面添加样式,使它看上去更美观,教大家写出实际可以使用的页面. 所有示例的完整代码,都可以从 GitHub 的代码仓库下载. 一.总体样式 微信小程序允许在顶层放置一个app.wxss文件,里面采用 CSS 语法设置页面样式.这个文件的设置,对所有页面都有效. 注意,小程序虽然使用 CSS 样式,但是样式文件的后缀名一律要写成.wxss. 打开上一篇教程

首先检查你的跳转方法,如果是wx.navigateTo(OBJECT)或者是wx.redirectTo(OBJECT)都是无法跳转的,在微信小程序中如果需要跳转到具有tab的页面必须使用wx.switchTab(OBJECT)方法(点击跳转到该方法文档说明处) 方法如下: wx.switchTab({ url: '/index' })

wxml代码如下: <!--pages/index2/index2.wxml--> <view class="index2Container"> <image class="avatar" src="/static/images/y.jpg"></image> <text class="username">hello 微信小程序</text> <vi

背景 为了实现点点点动态loading效果,并且方便使用(只需要给一个空元素加一个.loading),有如下代码: .loader { background-color: #fff; font-size: 25px; width: 8px; height: 8px; border-radius: 50%; margin: 10px auto; position: relative; -webkit-animation: load 1s infinite ease; animation: load

15.微信小程序缓存滑动距离 我们在浏览页面的时候,然后左滑或者右滑到新的页面,等返回此页面,我们希望可以记录上次滑动的距离 虽然这个实现起来并不难,但是会遇到一些坑,因为scroll-view的组件里面有个bindscroll滚动事件,我们纵向滚动页面,可以通过e.detail.scrollTop记录滑动的距离,但是当我们横向滚动时,还会出现一个问题,这个bindscroll事件还会执行一次,记录我们滑动当前的页面距离,通过测试发现,最后横向滑动的时候,他的scrollTop 是0,所以我们设

小程序开发并不愉快,许多必建的文件不会自动生成,页面之间的跳转没有快捷键,开发者工具显示区域受限……如果谁有对应的解决办法求告知…… 开始的时候每次保存代码,页面都会刷洗重新渲染一次,而且自动跳回首页,让人很不爽,后来随便点点,发现这里还是可以设置一些东西方便开发的. 开发模式下,点击左侧的“项目”,下面的选项可以阻止ctrl+S触发的刷新(其实这个留着也挺好的,不卡就行). 下一个选项是允许开发环境中从未注册的域名中请求数据,下载文件等.项目上线则需要将相关的域名都在开发设置中添加进去,每个月

先来个效果图: 使用技术主要是flex布局,绝对定位布局,小程序前端页面开发,以及一些样式! 直接贴代码,都有详细注释,熟悉一下,方便以后小程序开发! wxml: <view class='indexcontainer'> <!-- 顶部推荐图片轮播 --> <view class='selection'> <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}

//目前小程序没有fadeIn(),fadeOut()方法所以还是本方法手写  <!--wxml--><!--蒙版(渐出淡去效果)--><view class="aa" style='height: {{winH}}rpx;opacity: {{opacity}};'></view><!--正式内容(渐入加深效果)--> <view class="container log-list" style='

全局配置 三个页面 app.json pages字段 "pages":[ "pages/index/index", # 首页 "pages/home/home", # 我的 "pages/party/party" # 活动 ] window字段 这好看不好看 得css的人来配. "window":{ "backgroundTextStyle":"light", &qu

这段时间小程序开发时,很多时候,希望内容充满整个屏幕(高度.宽度100%),如下图 但是在设置 .followrecords-container{width:100%;} 后发现 手机在横向上虽然页面完全展示了,但是部分手机的页面却可以左右滑动(好像是溢出了一样,页面的右边总有一块白色区域),这肯定不是我们需要的.你上下滑动是正常功能,如果是左右页面切换,能滑动也是正常的,但是你这不是页面切换,纯粹就是右边溢出了一部分,多出一条莫名的白色区域,导致的滑动,肯定是不允许的. 解决办法就是在样式 

一,使用view形式的回到顶部 <image src='../../img/button-top.png' class='goTop' hidden='{{!floorstatus}}' bindtap="goTop"></image> /* 返回顶部 */ .goTop{ height: 80rpx; width: 80rpx; position: fixed; bottom: 50rpx; background: rgba(0,0,0,.3); right:

演示效果: 图片资源 index.js /** * 回到自己位置,在cover-image上绑定点击事件即可. */ clickcontrol(e) { let mpCtx = wx.createMapContext("map"); mpCtx.moveToLocation(); },

弹出 fixed 弹窗后,在弹窗上滑动会导致下层的页面一起跟着滚动. 解决方法: 在弹出层加上 catchtouchmove 事件 两种方法:(在电脑上测试是没有用的,这是触摸事件.因此,需要在手机端测试,预览生成一个开发版,用手机微信扫描即可看到效果) 1. wxml: <!-- 首页弹窗 --> <view class='Popup' hidden='{{bool}}' catchtouchmove="test"> js: test:function(){

wx.switchTab({ url: '../index/index', success: function(e) { var page = getCurrentPages().pop(); if (page == undefined || page == null) return; page.onLoad(); } }) switchTab成功跳转后调用success,此时可以拿到跳转后页面的page对象,从而调用页面onLoad方法重载页面;微信后期应该会加相应的参数来决定是否刷新跳转 上

wxml部分:这里引用的icon小图标可以自主更换 <view> <view class="titleCss"> <text class="titleTextCss">{{titleInfo}}</text> </view> <view class="weui-cells weui-cells_after-title"> <view class="weui-c