asp.net网站安装顺序,动漫制作专业有哪些职业岗位,大连网站制作仟亿科技,有赞微商城小程序在上一节实现了商品导航区域#xff0c;这一节实现跳转到商品列表的功能#xff1b;当用户在点击商品导航时#xff0c;需要能够跳转到商品列表页面#xff1b;在微信小程序中#xff0c;如果需要进行跳转#xff0c;需要使用 navigator 组件#xff0c;navigator 组件有…在上一节实现了商品导航区域这一节实现跳转到商品列表的功能当用户在点击商品导航时需要能够跳转到商品列表页面在微信小程序中如果需要进行跳转需要使用 navigator 组件navigator 组件有两个常用的属性
url当前小程序内的跳转链接也就是点击之后需要跳转到的页面路径open-type跳转方式 navigate保留当前页面跳转到应用内的某个页面但是不能跳到 tabbar 页面redirect关闭当前页面跳转到应用内的某个页面但是不能跳到 tabbar 页面switchTab跳转到 tabbar 页面并关闭其它所有非 tabbar 页面reLaunch关闭所有页面打开到应用内的某个页面navigateBack关闭当前页面返回上一页面或多级页面
使用 navigator 时有两个注意事项
url 路径后可以带参数。参数和路径之间使用 ? 分隔参数键与参数值用 相连不同参数用 分隔例如/list?id10namehualist 页面可以在 onLoad(options) 生命周期函数中获取传递的参数open-typeswitchTab 时不支持传参
下面在开发者工具中演示一下具体用法
在 index.wxml 中添加 navigator 组件如下
navigator url/pages/list/list到商品列表页面/navigatornavigator 组件中的 url 是指小程序内的跳转链接当点击文本时进入这个页面对应的路由在微信小程序中每个页面的路径都已经存放到根目录的 app.json 文件中的 pages 字段中如下 pages: [pages/index/index,pages/cate/cate,pages/cart/cart,pages/profile/profile,pages/list/list]我们找到 pages 中的 pages/list/list 路由并粘贴到 navigator 组件的 url 中注意在复制粘贴过程中需要在 pages/list/list 前面添加 / 否则无法正常跳转填写之后点击文本就能实现跳转功能如下 下面研究一下 open-type 属性的功能在 index.wxml 中添加下面的代码
navigator url/pages/list/list open-typenavigate到商品列表页面/navigator
navigator url/pages/cate/cate open-typenavigate到商品分类页面/navigator当我们使用 open-type 属性的 navigate 属性值时当我们点击第一个文本能够正常跳转但是点击第二个“跳转到商品分类页面”时无法正常跳转这是因为 list 商品列表页面是一个非 tabbar 页面cate 商品分类页面是一个 tabbar 页面navigate 属性会导致无法跳转到 tabbar 页面
redirect 属性同理只能跳转到非 tabbar 页面无法跳转 tabbar 页面
navigator url/pages/list/list open-typeredirect到商品列表页面/navigator
navigator url/pages/cate/cate open-typeredirect到商品分类页面/navigator虽然 navigate 和 redirect 都是只能跳转到非 tabbar 页面但是两者还是有区别的
navigate 属性跳转到对应的页面之后有返回上一页的箭头 redirect 属性跳转到对应的页面之后有返回当前项目首页的一个图标 redirect 方法的存在有其特定的意义和用途 - 简化页面栈: 在某些情况下页面的历史记录并不重要或者不希望用户返回到之前的页面。使用 redirect 可以避免页面栈中累积过多的页面简化页面管理 - 流程控制: 在一些需要强制用户完成某个流程的场景中使用 redirect 可以确保用户无法返回到之前的步骤。例如在用户完成某个操作后强制跳转到结果页面而不允许返回到操作页面 - 性能优化: 由于 redirect 会销毁当前页面可能在某些情况下有助于释放内存特别是在页面内容较多或复杂时
下面继续分析一下 open-type 中的 switchTab 属性
navigator url/pages/list/list open-typeswitchTab到商品列表页面/navigator
navigator url/pages/cate/cate open-typeswitchTab到商品分类页面/navigator可以发现 switchTab 属性只能跳转到 tabbar 页面无法跳转到 tabbar 页面
下面继续分析一下 open-type 中的 switchTab 属性
navigator url/pages/list/list open-typereLaunch到商品列表页面/navigator
navigator url/pages/cate/cate open-typereLaunch到商品分类页面/navigator在微信小程序中reLaunch 方法用于关闭所有页面并打开到应用内的某个页面。与其他页面跳转方法如 navigateTo、redirectTo 和 switchTab相比reLaunch 有其独特的功能和用途 功能 关闭所有页面: reLaunch 会关闭当前小程序中的所有页面清空页面栈打开指定页面: 在关闭所有页面后reLaunch 会打开指定的页面使其成为新的首页 用途 重置应用状态: 在某些情况下可能需要重置整个应用的状态。例如用户注销登录后可能需要返回到登录页面并清除之前的所有页面历史记录。reLaunch 可以实现这一需求流程结束: 在完成某个流程如注册、支付等后可能需要返回到应用的首页或某个特定页面并清除流程中的所有页面记录reLaunch 在这里插入代码片可以确保用户无法通过返回按钮回到流程中的页面错误处理: 在遇到严重错误或异常情况时可能需要重置应用并返回到某个特定页面如错误提示页面或首页。reLaunch 可以帮助开发者实现这一需求 注意事项 页面路径: reLaunch 方法的 url 参数必须是应用内的有效页面路径页面栈清空: 使用 reLaunch 后所有之前的页面都会被关闭用户无法通过返回按钮回到之前的页面性能影响: 由于 reLaunch 会关闭所有页面并重新打开一个新页面可能会对应用的性能产生一定影响特别是在页面内容较多或复杂时
下面继续分析一下 open-type 中的 navigateBack 属性
在 index.wxml 中添加下面的内容
navigator url/pages/list/list open-typenavigate到商品列表页面/navigator在 list.wxml 中添加对应代码
navigator open-typenavigateBack返回上一页/navigator当从 index 进入到 list 页面时点击 list 页面的 返回上一页 就能返回到 index 页面上一页所以说 navigateBack 的功能是返回上一页或者返回前几页navigateBack 默认只能返回上一页如果需要返回前几页需要添加一个属性 delta。delta 用于控制返回的层级指定返回前几页
navigator open-typenavigateBack delta1返回上一页/navigator如果需要传递参数需要遵循规范路径和参数之间需要以问号进行分隔参数键和值之间需要使用 来进行连接如果有多个参数需要使用 连接符进行分隔
navigator url/pages/list/list?id10numhua open-typenavigate到商品列表页面/navigator可以看到在跳转的时候页面参数已经成功带上 如果想获取 url 中的参数需要在 list.js 文件中找到 onLoad 生命周期函数onLoad 函数有一个默认的 options 形参通过 options 形参就能够接收传递的参数: onLoad(options) {console.log(options);},通过上面的讲解我们大致了解了 navigator 组件的用法下面我们使用 navigator 实现产品需求当点击商品导航时跳转到对应的商品列表中修改前面编写的商品导航区代码如下
view classgood-navviewnavigator url/pages/list/listimage src../../assets/category/cate-1.png mode /text鲜花玫瑰/text/navigator/viewviewnavigator url/pages/list/listimage src../../assets/category/cate-1.png mode /text鲜花玫瑰/text/navigator/viewviewnavigator url/pages/list/listimage src../../assets/category/cate-1.png mode /text鲜花玫瑰/text/navigator/viewviewnavigator url/pages/list/listimage src../../assets/category/cate-1.png mode /text鲜花玫瑰/text/navigator/viewviewimage src../../assets/category/cate-1.png mode /text鲜花玫瑰/text/view
/view具体效果如下 下面修改一下样式
view {navigator {display: flex;flex-direction: column;align-items: center;}image {width: 80rpx;height: 80rpx;}text {font-size: 24rpx;margin-top: 12rpx;}}navigator: display: flex;使用弹性盒布局使得子元素可以灵活地排列。flex-direction: column;将子元素垂直排列从上到下。align-items: center;将子元素在交叉轴水平轴上居中对齐。 image: width: 80rpx;设置图像的宽度为80rpxresponsive pixel响应式像素适应不同屏幕尺寸。height: 80rpx;设置图像的高度为80rpx保持图像的正方形比例。 text: font-size: 24rpx;设置文本的字体大小为24rpx确保在不同设备上有良好的可读性。margin-top: 12rpx;在文本和上方的图像之间添加12rpx的上外边距增加视觉上的间距使得布局更加美观。
参考视频尚硅谷微信小程序开发教程
