搜索功能（七）

2023-12-19 05:08| 来源: 网络整理| 查看: 265

关键字页面跳转——回车触发跳转并通过？方式携带参数控制跳转-通过?携带参数 // 输入关键字后，回车触发跳转并携带参数 mpvue.navigateTo({ url: '/pages/search_list/main?query=' + this.keyword }) 添加商品列表页面商品列表页面获取路径参数 onLoad (param) { // 参数query表示路径传递过来的参数 this.keyword = param.query } 实例

回车键触发方法-完整代码

methods: { toSearch () { // 回车时触发，跳转到商品列表页面并且缓存关键字 // console.log('enter') // 把搜索历史关键字放到数组中 this.hkw.unshift(this.keyword) // 数组去重操作 this.hkw = [...new Set(this.hkw)] // 再把数组放到缓存中 wx.setStorageSync('history', this.hkw) // 控制页面跳转到商品列表页面 wx.navigateTo({ //携带输入的关键字参数进行跳转跳转路径拼接 url: '/pages/search_list/main?kw=' + this.keyword }) }, }

第一步：在pages文件夹下，新建目录searc_list搜索页面文件夹

第二步：在search_list下，

新建main.js文件，内容固定

import Vue from 'vue' import App from './index' const app = new Vue(App) app.$mount()

新建模板文件index.vue

搜索列表 export default{ data(){ return{} } }

第三步：在src/app.json中配置路径

"pages": [ "pages/home/main", "pages/cate/main", "pages/cart/main", "pages/my/main", "pages/search/main", "pages/search_list/main" ],

第五步：新建文件，项目要重启 npm run dev

在输入框中输入关键字，回车，页面实现了跳转

在这里插入图片描述

携带参数

{{kw}} export default{ data(){ return{ kw:'' } }, onLoad(param){ // 页面跳转路由参数的获取 // console.1og(param) this. kw=param. kw } }

携参跳转验证：搜索关键字传递到了另一个页面

在这里插入图片描述

【本文地址】

公司简介

联系我们