微信小程序首页的分类功能和搜索功能的实现思路及代码详解

网友投稿 732 2023-11-09

就在昨天，微信宣布了微信小程序开发者工具新增“云开发”功能

微信小程序首页的分类功能和搜索功能的实现思路及代码详解

-最新的开发者工具，现在无需服务器即可实现小程序的快速迭代！

分类功能和搜素功能的效果图

1.首页分类功能的实现

boxtwo方法（.js文件）

?
1
2
3
4
5
6
boxtwo: function (e) {
var index = parseInt(e.currentTarget.dataset.index)
this.setData({
HomeIndex: index
})
},

当在首页点击 分类导航时，会触发这个方法，并传回当前点击时的index值。

这个方法实现的是将.wxml文件传来的index值赋给HomeIndex。

class="boxtwo-tab-nav {{HomeIndex == 0 ?on:}}"

.wxss样式文件

?
1
2
3
4
5
6
7
8
9
10
11
.boxtwo-tab-nav{
display: inline-block;
width: 20%;
height: 90rpx;
line-height: 90rpx;
border-bottom: 1rpx solid #ededed;
box-sizing: border-box;
text-align: center;
color: black;
font-size: 30rpx
}

这样就实现了首页 当前点击的分类 呈现出 被选中的样式。

然后在视图层根据HomeIndex的不同，加载对应的数据。

<navigator></navigator>组件实现的是点击当前文章时传出id到详情页面（detail）。这样就把首页的文章列表和文章的详情页面一一对应起来了。

detail.js文件

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
onLoad: function (options) {
var that = this
wx.request({
url: http://localhost:81/weicms/index.php?s=/addon/School/School/getDetail,
data: {id:options.id},
header: {
content-type: application/json
},
success: function (res) {
wx.setStorage({
key: info,
data: res.data,
})
that.setData({
info: res.data
})
}
})
}

2.搜索功能的实现

.wxml文件

?
1
2
3
4
<view class=search-view>
<input class=input confirm-type="search" maxlength="30" bindinput=wxSearchInput value={{keyword}} bindconfirm=wxSearchFn bindfocus="wxSerchFocus" bindblur="wxSearchBlur" placeholder=请输入搜索内容></input>
<button class=search bindtap="wxSearchFn" hover-class=button-hover>搜索</button>
</view>

JavaScript indexOf() 方法

indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。

key为搜索的关键字，res.data[i].title为首页列表的标题。使用indexOf()方法时，当满足了(res.data[i].title.indexOf(key) >= 0）说明说明输入的关键字在文章列表中

也有相同的关键字，然后arr.push(res.data[i])，这样就把筛选出来的文章放在了临时数组arr中了

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
//搜索方法 key为用户输入的查询字段
search: function (key) {
/*console.log(搜索函数触发)*/
var that = this;
var newsList = wx.getStorage({
key: newsList,
success: function (res) {//从storage中取出存储的数据*/
/*console.log(res)*/
if (key == ) {//用户没有输入 全部显示
that.setData({
newsList: res.data
})
return;
}
var arr = [];//临时数组 用于存放匹配到的数据
for (let i in res.data) {
if (res.data[i].title.indexOf(key) >= 0) {//查找
arr.push(res.data[i])
}
}
if (arr.length == 0) {
that.setData({
newsList:[]
})
} else {
that.setData({
newsList: arr//在页面显示找到的数据
})
}
}
})
}
//搜素时触发，调用search: function (key)，传入输入的e.detail.value值
wxSearchInput: function (e) {
this.search(e.detail.value);
}

index.wxml（首页）完整代码

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
<view class=search-view>
<input class=input confirm-type="search" maxlength="30" bindinput=wxSearchInput value={{keyword}} bindconfirm=wxSearchFn bindfocus="wxSerchFocus" bindblur="wxSearchBlur" placeholder=请输入搜索内容></input>
<button class=search bindtap="wxSearchFn" hover-class=button-hover>搜索</button>
</view>
<view class="boxtwo-tab-nav {{HomeIndex == 0 ?on:}}" bindtap="boxtwo" data-index="0">首页</view>
<view class="boxtwo-tab-nav {{HomeIndex == 1 ?on:}}" bindtap="boxtwo" data-index="1">资源分享</view>
<view class="boxtwo-tab-nav {{HomeIndex == 2 ?on:}}" bindtap="boxtwo" data-index="2">微信小程序</view>
<view class="boxtwo-tab-nav {{HomeIndex == 3 ?on:}}" bindtap="boxtwo" data-index="3">网赚小项目</view>
<view class="boxtwo-tab-nav {{HomeIndex == 4 ?on:}}" bindtap="boxtwo" data-index="4">共享经济</view>
<view class="wrap">
<template name="lists">
<navigator url=../../pages/detail/detail?id={{id}} hover-class="navigator-hover">
<view class=imgs>
<image src="{{img}}" background-size="cover" mode="scaleToFill"></image>
</view>
<view class=infos>
<view class="title">{{title}}</view>
<view class="date">{{cTime}}</view>
</view>
</navigator>
</template>
</view>
<view wx:if="{{HomeIndex == 0}}">
<block wx:for="{{newsList}}" wx:key="*this">
<template is="lists" data="{{...item}}"/>
</block>
</view>
<view wx:if="{{HomeIndex == 1}}" >
<block wx:for="{{shareList}}" wx:key="*this">
<navigator url=../../pages/shareDetail/shareDetail?id={{item.id}} hover-class="navigator-hover">
<view class=imgs>
<image src="{{item.img}}" background-size="cover" mode="scaleToFill"></image>
</view>
<view class=infos>
<view class="title">{{item.title}}</view>
<view class="date">{{item.cTime}}</view>
</view>
</navigator>
</block>
</view>
<view wx:if="{{HomeIndex == 2}}" >
<block wx:for="{{weixinList}}" wx:key="*this">
<navigator url=../../pages/weixinDetail/weixinDetail?id={{item.id}} hover-class="navigator-hover">
<view class=imgs>
<image src="{{item.img}}" background-size="cover" mode="scaleToFill"></image>
</view>
<view class=infos>
<view class="title">{{item.title}}</view>
<view class="date">{{item.cTime}}</view>
</view>
</navigator>
</block>
</view>
<view wx:if="{{HomeIndex == 3}}" >
<block wx:for="{{netearnList}}" wx:key="*this">
<navigator url=../../pages/netearnDetail/netearnDetail?id={{item.id}} hover-class="navigator-hover">
<view class=imgs>
<image src="{{item.img}}" background-size="cover" mode="scaleToFill"></image>
</view>
<view class=infos>
<view class="title">{{item.title}}</view>
<view class="date">{{item.cTime}}</view>
</view>
</navigator>
</block>
</view>
<view wx:if="{{HomeIndex == 4}}" >
<block wx:for="{{economyList}}" wx:key="*this">
<navigator url=../../pages/economyDetail/economyDetail?id={{item.id}} hover-class="navigator-hover">
<view class=imgs>
<image src="{{item.img}}" background-size="cover" mode="scaleToFill"></image>
</view>
<view class=infos>
<view class="title">{{item.title}}</view>
<view class="date">{{item.cTime}}</view>
</view>
</navigator>
</block>
</view>

 index.wxss（对应的样式文件）

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
.wrap{
height: 100%;
display:flex;
flex-direction: column;
padding: 20rpx
}
navigator{overflow: hidden}
.list{
margin-bottom: 20rpx;
height: 200rpx;
position: relative;
}
.imgs{
float: left;
}
.imgs image{
display: block;
width: 210rpx;
height: 180rpx;
}
.boxtwo-tab-nav{
display: inline-block;
width: 20%;
height: 90rpx;
line-height: 90rpx;
border-bottom: 1rpx solid #ededed;
box-sizing: border-box;
text-align: center;
color: black;
font-size: 30rpx
}
.on{
color:#405F80;
border-bottom: 5rpx solid #405F80;
}
.infos{
float: left;
width: 480rpx;
height: 200rpx;
padding: 20rpx 0 0 20rpx;
}
.date{
font-size:13px;color:#aaa;position: absolute;
}
.title{font-size: 15px;}
.search{
float: left;
width: 130rpx;
height: 70rpx;
margin-left: 0;
background-color: blueviolet;
font-size: 28rpx;
color: #fff;
border: none;
}
.input{
float: left;
width: 500rpx;
height: 70rpx;
font-size: 35rpx;
background-color: white;
}
.search-view{
position: relative;
overflow: hidden;
height: 70rpx;
padding: 20rpx 20rpx 25rpx 60rpx;
background-color: #6699FF;
}
.button-hover {
background-color: red;
}

.js文件（逻辑层）

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
Page({
data:{
newsList:[],
HomeIndex: 0
},
onLoad: function () {
var that = this;
wx.request({
url: http://localhost:81/weicms/index.php?s=/addon/School/School/getList,
data: {},
header: {
content-type: application/json
},
success: function (res) {
console.log(res.data)
wx.setStorage({
key: newsList,
data: res.data,
})
that.setData({
newsList: res.data
})
}
})
wx.request({
url: http://localhost:81/weicms/index.php?s=/addon/Share/Share/getList,
data: {},
header: {
content-type: application/json
},
success: function (res) {
wx.setStorage({
key: sharesList,
data: res.data,
})
that.setData({
shareList: res.data
})
}
})
wx.request({
url: http://localhost:81/weicms/index.php?s=/addon/Weixin/Weixin/getList,
data: {},
header: {
content-type: application/json
},
success: function (res) {
wx.setStorage({
key: weixinList,
data: res.data,
})
that.setData({
weixinList: res.data
})
}
})
wx.request({
url: http://localhost:81/weicms/index.php?s=/addon/Netearn/Netearn/getList,
data: {},
header: {
content-type: application/json
},
success: function (res) {
wx.setStorage({
key: netearnList,
data: res.data,
})
that.setData({
netearnList: res.data
})
}
})
wx.request({
url: http://localhost:81/weicms/index.php?s=/addon/Economy/Economy/getList,
data: {},
header: {
content-type: application/json
},
success: function (res) {
wx.setStorage({
key: economyList,
data: res.data,
})
that.setData({
economyList: res.data
})
}
})
},
//搜索方法 key为用户输入的查询字段
search: function (key) {
/*console.log(搜索函数触发)*/
var that = this;
var newsList = wx.getStorage({
key: newsList,
success: function (res) {//从storage中取出存储的数据*/
/*console.log(res)*/
if (key == ) {//用户没有输入 全部显示
that.setData({
newsList: res.data
})
return;
}
var arr = [];//临时数组 用于存放匹配到的数据
for (let i in res.data) {
if (res.data[i].title.indexOf(key) >= 0) {//查找
arr.push(res.data[i])
}
}
if (arr.length == 0) {
that.setData({
newsList:[]
})
} else {
that.setData({
newsList: arr//在页面显示找到的数据
})
}
}
})
},
//事件处理函数
bindViewTap: function() {
wx.navigateTo({
url: ../logs/logs
})
},
wxSearchInput: function (e) {
this.search(e.detail.value);
console.log(e.detail.value)
},
wxSerchFocus: function (e) {
this.search(e.detail.value);
},
wxSearchBlur: function (e) {
this.search(e.detail.value);
},
wxSearchFn: function (e) {
/*console.log(e)*/
},
boxtwo: function (e) {
var index = parseInt(e.currentTarget.dataset.index)
this.setData({
HomeIndex: index
})
},

总结

以上所述是小编给大家介绍的微信小程序首页的分类功能

您可能感兴趣的文章:微信小程序实现搜索功能微信小程序搜索组件wxSearch实例详解微信小程序下拉框搜索功能的实现方法微信小程序实现搜索功能并跳转搜索结果页面微信小程序搜索框样式并实现跳转到搜索页面(小程序搜索功能)微信小程序实现全局搜索代码高亮的示例微信小程序实现搜索历史功能微信小程序 搜索框组件代码实例微信小程序实现搜索框功能微信小程序实现简单搜索功能

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。

标签：程序 代码 微信小程序 小程序 js
上一篇:微信小程序（应用号）组件详细介绍
下一篇:微信小程序实战项目之富文本编辑器实现
相关文章

 发表评论

暂时没有评论，来抢沙发吧~