【微信小步调】3|首页搜刮框 | 我的咖啡店-综合实训

首页-搜刮框-跳转

引言

在微信小步调中，首页的搜刮框是用户交互的重要入口。本文将通过“我的咖啡店”小步调的首页搜刮框实现，具体介绍怎样在微信小步调中创建和处理惩罚搜刮框的交互。
1. 搜刮函数实现

onClickInput函数在用户点击搜刮框时触发，表现加载提示并跳转到搜刮页面。

1. // pages/home/home.js
2. Page({
3.   onClickInput: function() {
4.     wx.showLoading({
5.       title: '努力加载中...',
6.     });
7.     wx.navigateTo({
8.       url: '/pages/search/search' // 请根据实际路径修改
9.     });
10.   },
11.   // ...其他函数
12. });

复制代码

2. WXML 布局

在home.wxml中，我们使用<van-search>组件创建搜刮框，并使用<swiper>组件创建轮播图。

1. <!--pages/home/home.wxml-->
2. <view class="home">
3.   <!-- 搜索框开始 -->
4.   <van-search shape="round" background="#fff" placeholder="搜索咖啡店" bind:click-input="onClickInput">
5.   </van-search>
6.   <!-- 搜索框结束 -->
8.   <!-- 轮播图开始 -->
9.   <swiper indicator-dots indicator-active-color="#ff7173" autoplay interval="3000" circular>
10.     <swiper-item wx:for="{{bannerList}}" wx:key="index">
11.       <image src="{{item}}" referrerPolicy="no-referrer" class="b-img" />
12.     </swiper-item>
13.   </swiper>
14.   <!-- 轮播图结束 -->
15. </view>

复制代码

结语

        通过上述步骤，我们乐成在“我的咖啡店”小步调的首页实现了搜刮框功能。用户可以通过点击搜刮框跳转到搜刮页面，进行搜刮操作。
完整代码

home.js

1. // pages/home/home.js
3. Page({
5.   //页面的初始数据
7.   data: {
9.     // 轮播图数据
11.     bannerList: [
13.       'https://i-blog.csdnimg.cn/direct/420b00699f0643d88fd7bd549cba78a4.png',
15.       'https://i-blog.csdnimg.cn/direct/d41b0f66fc404023b4796cb0dd8bafaa.png',
17.       'https://i-blog.csdnimg.cn/direct/92f3b715f4d94723a6b9b1d941d16aa3.png',
19.       'https://i-blog.csdnimg.cn/direct/2c21368a3870417f9ca522b2c0975b5d.png'
21.     ]
23.   },
27.   // 搜索函数，点击搜索框时触发
29.   onClickInput: function () {
31.     // 加载提示
33.     wx.showLoading({
35.       title: '努力加载中...',
37.     });
39.     // 直接跳转到搜索页面
41.     wx.navigateTo({
43.       url: '/pages/search/search' // 请根据实际路径修改
45.     });
47.   },
49. })

复制代码

home.wxml

1. <!--pages/home/home.wxml-->
3. <!-- div ==> view  img ==> image -->
7. <view class="home">
9.   <!-- 搜索框开始 -->
11.   <van-search shape="round" background="#fff" placeholder="{{defaultSearchHint}}" bind:click-input="onClickInput">
13.   </van-search>
15.   <!-- 搜索框结束 -->
19.   <!-- 轮播图开始 -->
21.   <swiper indicator-dots indicator-active-color="#ff7173" autoplay interval="3000" circular>
23.     <!-- wx:for="{{数据}}" wx:key  默认 index下标   item每一项 -->
25.     <swiper-item wx:for="{{bannerList}}" wx:key="index">
27.       <image src="{{item}}" referrerPolicy="no-referrer" class="b-img" />
29.     </swiper-item>
31.   </swiper>
33.   <!-- 轮播图结束 -->
37. </view>

复制代码

展示

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。