首页-搜索框-跳转
引言
在微信小程序中，首页的搜索框是用户交互的重要入口。本文将通过“我的咖啡店”小程序的首页搜索框实现，详细介绍如何在微信小程序中创建和处理搜索框的交互。
1. 搜索函数实现
onClickInput函数在用户点击搜索框时触发，显示加载提示并跳转到搜索页面。
// pages/home/home.js
Page({
onClickInput: function() {
wx.showLoading({
title: '努力加载中...',
});
wx.navigateTo({
url: '/pages/search/search' // 请根据实际路径修改
});
},
// ...其他函数
});2. WXML 结构
在home.wxml中，我们使用<van-search>组件创建搜索框，并使用<swiper>组件创建轮播图。
<!--pages/home/home.wxml-->
<view class="home">
<!-- 搜索框开始 -->
<van-search shape="round" background="#fff" placeholder="搜索咖啡店" bind:click-input="onClickInput">
</van-search>
<!-- 搜索框结束 -->
<!-- 轮播图开始 -->
<swiper indicator-dots indicator-active-color="#ff7173" autoplay interval="3000" circular>
<swiper-item wx:for="{{bannerList}}" wx:key="index">
<image src="{{item}}" referrerPolicy="no-referrer" class="b-img" />
</swiper-item>
</swiper>
<!-- 轮播图结束 -->
</view>结语
通过上述步骤，我们成功在“我的咖啡店”小程序的首页实现了搜索框功能。用户可以通过点击搜索框跳转到搜索页面，进行搜索操作。
完整代码
home.js
// pages/home/home.js
Page({
//页面的初始数据
data: {
// 轮播图数据
bannerList: [
'https://i-blog.csdnimg.cn/direct/420b00699f0643d88fd7bd549cba78a4.png',
'https://i-blog.csdnimg.cn/direct/d41b0f66fc404023b4796cb0dd8bafaa.png',
'https://i-blog.csdnimg.cn/direct/92f3b715f4d94723a6b9b1d941d16aa3.png',
'https://i-blog.csdnimg.cn/direct/2c21368a3870417f9ca522b2c0975b5d.png'
]
},
// 搜索函数，点击搜索框时触发
onClickInput: function () {
// 加载提示
wx.showLoading({
title: '努力加载中...',
});
// 直接跳转到搜索页面
wx.navigateTo({
url: '/pages/search/search' // 请根据实际路径修改
});
},
})home.wxml
<!--pages/home/home.wxml-->
<!-- div ==> view img ==> image -->
<view class="home">
<!-- 搜索框开始 -->
<van-search shape="round" background="#fff" placeholder="{{defaultSearchHint}}" bind:click-input="onClickInput">
</van-search>
<!-- 搜索框结束 -->
<!-- 轮播图开始 -->
<swiper indicator-dots indicator-active-color="#ff7173" autoplay interval="3000" circular>
<!-- wx:for="{{数据}}" wx:key 默认 index下标 item每一项 -->
<swiper-item wx:for="{{bannerList}}" wx:key="index">
<image src="{{item}}" referrerPolicy="no-referrer" class="b-img" />
</swiper-item>
</swiper>
<!-- 轮播图结束 -->
</view>展示
