05-菜谱二级联动导航案例实战-项目资源初始化、数据结构和数据初始化

Raink老师 2025-05-10 14:33:45

课时名称	课时知识点
05-菜谱二级联动导航案例实战-项目资源初始化、数据结构和数据初始化	菜谱二级联动导航案例实战-项目资源初始化、数据结构和数据初始化

...全文

55 回复打赏收藏转发到动态举报

写回复

回复

切换为时间正序

请发表友善的回复…

发表回复

本篇案例主要介绍如何基于List组件实现一个导航和内容的二级联动效果。样例主要包含以下功能： 1. 切换左侧导航，右侧滚动到对应的内容。 2. 滚动右侧的内容，左侧会切换对应的导航。

文章目录前言效果图index.vue总结前言提示：这个小功能大致的逻辑：（1）、左右两边都是scrollView布局，左右边栏每一个标题就是一个item项，我们可以同时用Promise.all实例化来初始化数据来使用uni.createSelectorQuery()获取左边每个item所需要的offsetTop和Height，同理右边栏获取每个item所需要的offsetTop和bottom等等的节点位置信息，提示：以下是本篇文章正文内容，下面案例可供参考，直接上代码效果图 index.v

由于小程序各页面间 JS 环境隔离，跨页面通信需依赖全局对象。// app.jsApp({token: '',city: '北京',},},})在任意页面中获取全局实例：Page({onLoad() {if (!token) {})注意事项getApp()返回的是单例对象，不要对其进行构造或修改原型；- 若需异步初始化数据（如网络请求），应在onLaunch中使用Promise或事件通知机制告知页面；

这节主要内容是通过AJAX调用页面后台代码方法实现下拉框二级联动效果，实现步骤如下： 1.创建文件Recipe24.aspx,实现后台代码如下： // 引入命名空间using System.Web.Services;// 实现下拉框二级联动AJAX请求加载数据方法 [WebMethod()] public static ArrayList GetSubList(str...

商品双向联动列表的使用电商app中，商品双向联动列表是非常常见的。类似于这样的： dcloud插件市场是有现成的插件的，是黄河爱浪同学写的。。。商品双向联动列表插件地址：https://ext.dcloud.net.cn/plugin?id=707 目前我没有详细调整样式，因为UI图还在修改中，最终实现的效果不是很好看，但是基本功能都是有的：接口的数据是前端模拟的，后续会根据接口自行调整数据。另外如果某个商品选择数量时，如果有不同的规格，则需要在底部弹窗进行规格的展示，然后选择规格后再加入购

陆荣涛的课程社区_NO_1

1

社区成员

273

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章