zoukankan      html  css  js  c++  java
  • 小程序路由

    1. 路由方式

    路由方式触发时机路由前页面路由后页面
    初始化 小程序打开的第一个页面   onLoad, onShow
    打开新页面 调用 API wx.navigateTo 或使用组件 onHide onLoad, onShow
    页面重定向 调用 API wx.redirectTo 或使用组件 onUnload onLoad, onShow
    页面返回 调用 API wx.navigateBack 或使用组件或用户按左上角返回按钮 onUnload onShow
    Tab 切换 调用 API wx.switchTab 或使用组件 或用户切换 Tab   各种情况请参考下表
    重启动 调用 API wx.reLaunch 或使用组件 onUnload onLoad, onShow

    用法如下:

    <navigator url="/pages/detail/detail" open-type='navigate' style='border:1px solid red;' >进入非tab页</navigator>
    <navigator url="/pages/index/index" open-type='switchTab' >进入首页(tab页)</navigator>
    <navigator url="/pages/index/index" open-type='switchTab' >进入首页(tab页)</navigator>
    <navigator open-type='navigateBack' >回退</navigator>
    • navigateTo, redirectTo 只能打开非 abBar 页面。
    • switchTab 只能打开 tabBar 页面。
    • reLaunch可以打开任意页面, 但是没有返回按钮,需要定义一个可以点击回退的按钮。
    • 页面底部的 tabBar 由页面决定,即只要是定义为 tabBar 的页面,底部都有 tabBar。
    • 调用页面路由带的参数可以在目标页面的onLoad中获取。

    2. 路由传参

    从列表页进入详情页时,需要传递列表被点击项目的 id 至详情页,方法:

    1. 在列表页通过data-id='{{item.id}}'给各个项目绑定一个 id ;
    2. 在详情页通过 onload 拿到 id;
    列表页:
    <view class="list" >
        <view class='box'  wx:for='{{list}}' wx:key='{{index}}' data-id='{{item.id}}' bindtap='goDetail'>
            <image src='{{item.img}}'></image>
            <view class='tip'>
                <text>{{item.title}}</text>
                <text class='price'>¥{{item.price}}</text>
            </view> 
        </view> 
    </view>
    
    // 进入详情页时 传递 id
    goDetail (e) {
        console.log(e.currentTarget.dataset.id),
        wx.navigateTo({
            url: `/pages/detail/detail?id=${e.currentTarget.dataset.id}`,
        })
    },
    
    详情页:
    
    // pages/detail/detail.js
    Page({
     
        data: {
            detail: {},
            loading: true
        }, 
        
        onLoad: function (options) {
            this.loadDetail(options.id); // 拿到列表页传过来的 id
            console.log(options.id)
        },
    
        loadDetail (id) {
            wx.showLoading({
                title: '详情加载中...',
            })
    
            wx.request({
                url: 'http://10.0.1.109:3000/list',
                success: (res) => {
                    console.log(res.data.cityList);
                    let thisPlace = res.data.cityList.filter((val) => val.id == id)
                    console.log(thisPlace)
                    this.setData({ 
                        detail: thisPlace[0],
                        loading: false
                    });
                    console.log(this.data.detail)
                    wx.hideLoading();
                }
            })
        },
    
    })
  • 相关阅读:
    k3 cloud套打模板中出现单元格数据为空的情况,及无法正确的选择数据源
    k3 cloud中列表字段汇总类型中设置了汇总以后没有显示出汇总值
    k3 cloud查看附件提示授予目录NetWorkService读写权限
    k3 cloud中提示总账期末结账提示过滤条件太长,请修改此过滤条件
    金蝶云k3 cloud采购入库单校验日期不通过
    C# Code First 配置(二)
    C# Azure 远程调试
    C# ABP源码详解 之 BackgroundJob,后台工作(一)
    C# 在webapi项目中配置Swagger(最新版2017)
    高并发之
  • 原文地址:https://www.cnblogs.com/xiaozhang666/p/11383780.html
Copyright © 2011-2022 走看看