小程序商城项目首页搜索框自定义组件跳转功能实现

最新推荐文章于 2022-05-17 14:19:37 发布
最新推荐文章于 2022-05-17 14:19:37 发布
阅读量555 收藏 4
点赞数 1
分类专栏： 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46351593/article/details/114260204
版权

文章目录

一、创建自定义组件

  • 在components文件夹下新建SearchInput文件夹
  • 然后在微信开发者工具中，右键SearchInput文件夹，创建组件

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IfSl5MBl-1614573509081)(/Users/mac/Desktop/前端学习笔记/小程序/小程序首页搜索框跳转自定义组件/1.jpg)]

二、在首页中使用组件

  • 先在index.json中配置组件名称与路径
  • 然后在index.wxml中使用该组件

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-I5iurb7v-1614573509085)(/Users/mac/Desktop/前端学习笔记/小程序/小程序首页搜索框跳转自定义组件/2.jpg)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Y9YC1hW1-1614573509086)(/Users/mac/Desktop/前端学习笔记/小程序/小程序首页搜索框跳转自定义组件/3.jpg)]

三、完成SearchInput组件功能

  • SearchInput组件需要navigator标签跳转到另外一个搜索页面

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-G9I9x7GG-1614573509090)(/Users/mac/Desktop/前端学习笔记/小程序/小程序首页搜索框跳转自定义组件/4.jpg)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HvxGryej-1614573509092)(/Users/mac/Desktop/前端学习笔记/小程序/小程序首页搜索框跳转自定义组件/5.jpg)]

四、效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wlof5Pf7-1614573509093)(/Users/mac/Desktop/前端学习笔记/小程序/小程序首页搜索框跳转自定义组件/6.gif)]

阿牛大牛中
关注
专栏目录
使用HBuilder uni-app VUE 创建微信小程序中 自定义搜索组件点击跳转页面
weixin_66511008的博客
10-07 1002
使用HBuilder uni-app VUE 创建微信小程序中 自定义搜索组件点击跳转页面
【小程序项目开发-- 京东商城】uni-app之自定义搜索组件（下） -- 搜索历史
m0_67393413的博客
07-31 462
??欢迎来到?????魔术之家！！??该文章收录专栏专栏内容。
小程序自定义组件跳转回来传参改值
qq_45967222的博客
09-06 152
之前页面，需要修改UnNum: wx.navigateTo({ url: '/pages/myOrder/myOrder?active=' + active, events: { acceptDataFromOpenedPage: function (data) { console.log(data); that.setData({ UnNum: data, }); }
“商城项目”自定义搜索框
weixin_30660027的博客
05-10 187
1.要实现搜索的效果图如下：《功能：当输入关键字点击搜索按钮的时候在list上显示出来，点击商品进入商品详情页即可》 2>自定义搜索框，在导航栏视图上添加搜索视图，代码如下： 3>搜索结果的tableView，定义一个数组将解析数据的内容存取到数组中，将数组的个数加一，最后多得一行作为清除历史记录的一行 4>重要的一点就是：点击清除历史记录的时候，将保存到NSu...
微信小程序搜索框样式并实现跳转到搜索页面(小程序搜索功能)
12-28
上效果图: 一:搜索框功能实现 1.在首页做一个搜索框的样式并实现跳转到搜索页面 <view class='page_row' bindtap=suo> <view class=search> <view class=df> <icon class=searchcion size='20' type='search'></icon> <input class= disabled placeholder=请输入关键字 value={{searchValue}}/> </view> </view> <view clas
微信小程序实现搜索功能并跳转搜索结果页面
10-16
主要介绍了微信小程序实现搜索功能并跳转搜索结果页面，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
轮播图和自定义组件，微信小程序开发，商城
10-21
在微信小程序的开发中，创建一个功能丰富的商城应用通常涉及到多个关键知识点，其中包括轮播图的实现、自定义组件的设计以及微信小程序的基础架构。这里我们将深入探讨这些主题。 首先，让我们来谈谈轮播图（Banner...
自定义微信小程序navBar组件，支持搜索框，添加logo，显示天气信息（可自行添加事件），支持添加返回主页，返回按钮
最新发布
05-28
通过以上步骤，我们成功地创建了一个自定义的微信小程序navBar组件，它具备搜索框、logo、天气信息显示以及返回主页和返回按钮的功能，并允许自定义样式。这将极大地提高开发效率，同时为用户提供更加美观和一致的...
微信小程序下拉搜索框弹出菜单动画效果
10-10
本示例着重讨论的是如何实现"微信小程序下拉搜索框弹出菜单动画效果"。这种效果常见于许多应用，用户通过下拉动作触发搜索框，同时展示出一个包含选项的菜单，既实用又具有视觉吸引力。 1. **微信小程序基础**： ...
微信小程序自定义组件实现tabs选项卡功能
12-02
本文为大家分享了微信小程序实现tabs选项卡功能的具体代码，供大家参考，具体内容如下 一个自定义组件由 json wxml wxss js 4个文件组成。要编写一个自定义组件，首先需要在 json 文件中进行自定义组件声明（将 component 字段设为 true 可这一组文件设为自定义组件） components/navigator/index.json { "component": true } components/navigator/index.wxml <!-- 自定义tab标签组件--> <!-- 标题列表--> <scroll-view scroll-x="true" c
微信小程序---搜索功能并跳转搜索结果页面
张新丁
02-12 1万+
搜索页面： search.wxml页面： &lt;view class="form"&gt; &lt;input class="searchInput" value='{{keyWord}}' bindconfirm='goSearch' placeholder="请输入搜索关键字" type="text" /&gt; &lt;/view&gt;
16 Flutter仿京东商城项目 跳转到搜索页面实现搜索功能 以及搜索筛选
weixin_30522095的博客
09-02 1015
ProductList.dart import 'package:flutter/material.dart'; import '../services/ScreenAdaper.dart'; import '../config/Config.dart'; import 'package:dio/dio.dart'; import '../model/ProductMode...
小程序自定义组件+页面与自定义组件间的通信
qq_36647998的博客
06-15 2786
1.创建一个组件图中的singerList就是一个组件，组件为了规范通常放在conponents里。2.在页面的json文件里引用组件标签名字记得对应json文件里的对应的组件的key值3.使用组件的方法和属性（父级别调用）组件内定义了一个fun的方法4.页面传值/方法到组件页面里这样配置当调用fun（）时，则会执行index.js里的exFun...
开发基于SpringBoot和BootStrap的全栈论坛网站（五）：完成首页展示以及分页功能
Java鱼仔的博客
11-15 2790
如果你对这个项目感兴趣，可以从头看起： 开发基于SpringBoot和BootStrap的全栈论坛网站（一）：准备阶段 开发基于SpringBoot和BootStrap的全栈论坛网站（二）：后端人员如何快速使用BootStrap 开发基于SpringBoot和BootStrap的全栈论坛网站（三）：登陆注册以及cookies的功能完成 开发基于SpringBoot和BootStrap的全栈...
CRM-首页功能实现
哈哈
05-17 403
接上一篇：SSM整合初始环境搭建 1. 首页功能分析 1.用户访问项目首页，首先进入登录页面 2.把项目部署到tomcat上：http://localhost:8080/ 项目搭建时已经新建了WEB-INF/pages/index.jsp首页，什么都没有写 写com/lyx/web/controller/IndexController.java 当用户访问http://localhost:8080/时，由于IndexController的index()方法的@RequestMapping是“/”，
8.完成首页展示功能（二）
qr_828的博客
11-28 216
2.banner的显示 参考菜单功能的流程，新建：     1). 商品对象（banner这里显示的也是商品信息）     Commodity.class package com.qyuz.model; import java.io.Serializable; public class Commodity implements Serializable{ /** * ...
小程序自定义组件的具体实现+页面与自定义组件间的通信
热门推荐
静水
01-27 1万+
具体步骤如下： 1.创建一个组件 图中的singerList就是一个组件，组件为了规范通常放在conponents里。 2.在页面的json文件里引用组件 //想在index.wxml中引用，则对应的index.json要这样配置 { "usingComponents": { "songList":"/components/songList/songList
微信小程序自定义底部导航栏组件+跳转
weixin_30385925的博客
06-11 3422
微信小程序本来封装有底部导航栏，但对于想自定义样式和方法的开发者来说，这并不是很好。 参考链接：https://github.com/ljybill/miniprogram-utils/tree/master/custom-tabbar 首先创建一个底部导航栏组件，名为：navBar <view class='tabbar'> <view wx:if='...
微信小程序：仿iPhone通讯录的自定义搜索与字母导航组件实现
在本文中，作者分享了如何实现一个仿照iPhone通讯录风格的小程序自定义选择组件的过程。首先，项目的核心功能包括：按首字母排序的联系人列表、输入搜索功能以及侧边栏字母导航。整个组件被划分为三个部分：顶部搜索...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值