微信文章转网站wordpress关于网站建设规划方书案例样式

微信文章转网站wordpress,关于网站建设规划方书案例样式,wordpress 自定义栏目 调用,机械外贸平台uniapp 实现路由切或者tab切换详细步骤 在 UniApp 中实现页面路由和标签页#xff08;Tab#xff09;切换是核心开发技能。下面为你梳理详细步骤和不同场景的实践方案。 下面表格中帮助你快速了解 UniApp 中主要的页面跳转方式及其区别#xff1a;跳转方法作用适用场景关键限…uniapp 实现路由切或者tab切换详细步骤在 UniApp 中实现页面路由和标签页Tab切换是核心开发技能。下面为你梳理详细步骤和不同场景的实践方案。下面表格中帮助你快速了解 UniApp 中主要的页面跳转方式及其区别跳转方法作用适用场景关键限制uni.navigateTo保留当前页面跳转到新页面可返回普通页面跳转如列表页→详情页页面栈最多10层不能跳转至tabbar页面uni.redirectTo关闭当前页面跳转到新页面不可返回无需返回的跳转如登录页→首页不能跳转至tabbar页面uni.reLaunch关闭所有页面打开新页面应用重启场景如退出登录→登录页可跳转到任意页面uni.switchTab关闭所有非tabbar页面跳转到tabbar页面从普通页面切换回首页等tab页只能跳转至pages.json中配置的tabbar页面uni.navigateBack返回上一页面或多级页面详情页→列表页通常与navigateTo配合使用 路由跳转详解1. 基本跳转与传参最常用的跳转方式是uni.navigateTo。在跳转时可以通过URL传递参数。// 在起始页面跳转并传递参数uni.navigateTo({url:/pages/detail/detail?id80titleHello});在目标页面于onLoad生命周期函数中接收参数// 在目标页面/pages/detail/detail.vue接收参数exportdefault{onLoad(options){// options 是一个对象包含传递过来的参数console.log(options.id);// 输出80console.log(options.title);// 输出Hello}}注意通过URL传递的参数值会被转换为字符串类型如有需要如ID为数字请在接收后进行类型转换 。2. 返回上一页使用uni.navigateBack可以返回上一页面或多级页面。// 返回上一页uni.navigateBack();// 返回上两级页面uni.navigateBack({delta:2});️ 实现Tab切换在 UniApp 中Tab 切换有两种主要形式基于原生 TabBar 的切换和自定义顶部标签页切换。1. 原生TabBar切换底部导航栏这是最标准的方式通过uni.switchTab实现体验与原生应用一致。步骤一配置 pages.json首先需要在pages.json中正确配置tabBar。{pages:[{path:pages/index/index,style:{navigationBarTitleText:首页}},{path:pages/category/category,style:{navigationBarTitleText:分类}},{path:pages/cart/cart,style:{navigationBarTitleText:购物车}},{path:pages/profile/profile,style:{navigationBarTitleText:我的}}],tabBar:{color:#7A7E83,selectedColor:#007AFF,backgroundColor:#F8F8F8,list:[{pagePath:pages/index/index,text:首页,iconPath:static/tab-home.png,selectedIconPath:static/tab-home-active.png},{pagePath:pages/category/category,text:分类,iconPath:static/tab-cate.png,selectedIconPath:static/tab-cate-active.png}]}}步骤二使用API跳转在代码中使用uni.switchTab进行跳转。// 从任意非tabbar页面跳转到首页tabbar页面uni.switchTab({url:/pages/index/index});重要uni.switchTab的url不能带参数 。2. 自定义顶部标签页切换当需要更灵活的样式或顶部标签效果时可以结合swiper和scroll-view组件自定义。步骤一构建模板结构templateview!-- 1. 自定义顶部标签栏 --scroll-viewscroll-xclassnav-scroll:scroll-into-viewcurrentNavIdviewv-for(item, index) in navList:keyindex:idnavindex:class[nav-item, currentTab index ?active:]clickswitchTab(index){{ item.text }}/view/scroll-view!-- 2. 可滑动的页面区域 --swiper:currentcurrentTabchangeonSwiperChangeclassswiper-boxswiper-itemv-for(item, index) in navList:keyindexviewclassswiper-item!-- 第一个标签页的内容 --textv-ifindex 0首页内容/text!-- 第二个标签页的内容 --textv-ifindex 1分类内容/text!-- 可以在这里嵌入子组件 --/view/swiper-item/swiper/view/template步骤二实现逻辑与样式scriptexportdefault{data(){return{currentTab:0,// 当前选中的标签索引navList:[// 标签列表{text:首页},{text:分类}]};},methods:{// 点击标签切换switchTab(index){this.currentTabindex;},// 滑动swiper时触发onSwiperChange(e){this.currentTabe.detail.current;}}};/scriptstyle.nav-scroll{white-space:nowrap;width:100%;background-color:#f8f8f8;}.nav-item{display:inline-block;padding:20rpx30rpx;font-size:30rpx;}.nav-item.active{color:#007AFF;font-weight:bold;border-bottom:4rpx solid #007AFF;}.swiper-box{height:calc(100vh-80rpx);/* 根据导航栏高度调整 */}.swiper-item{height:100%;padding:20rpx;box-sizing:border-box;}/style这种自定义方式能实现丰富的交互效果如滑动切换、标签滚动居中定位等 。 场景选择与建议需要标准底部导航优先使用原生TabBar体验最佳且配置简单。需要顶部导航或高度自定义UI使用自定义顶部标签页方案。普通页面跳转如进入详情页使用uni.navigateTo。完成操作后无需返回如登录成功使用uni.redirectTo或uni.reLaunch。从深层级页面一键返回首页使用uni.switchTab回tab页或uni.reLaunch回普通页。