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();
                }
            })
        },
    
    })
    
    
  • 相关阅读:
    Read-Copy Update Implementation For Non-Cache-Coherent Systems
    10 华电内部文档搜索系统 search04
    10 华电内部文档搜索系统 search05
    lucene4
    10 华电内部文档搜索系统 search01
    01 lucene基础 北风网项目培训 Lucene实践课程 索引
    01 lucene基础 北风网项目培训 Lucene实践课程 系统架构
    01 lucene基础 北风网项目培训 Lucene实践课程 Lucene概述
    第五章 大数据平台与技术 第13讲 NoSQL数据库
    第五章 大数据平台与技术 第12讲 大数据处理平台Spark
  • 原文地址:https://www.cnblogs.com/cckui/p/10007976.html
Copyright © 2011-2022 走看看