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


Posted in Javascript onSeptember 11, 2018

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

下载最新的开发者工具,现在无需服务器即可实现小程序的快速迭代!

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

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

1.首页分类功能的实现

boxtwo方法(.js文件)

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样式文件

.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的不同,加载对应的数据。

<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>

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

detail.js文件

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文件

<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中了

//搜索方法 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(首页)完整代码

<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(对应的样式文件)

.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文件(逻辑层)

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
  })
 },

总结

以上所述是小编给大家介绍的微信小程序首页的分类功能和搜索功能的实现思路及代码详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
来自chinaz的ajax获取评论代码
May 03 Javascript
js查找父节点的简单方法
Jun 28 Javascript
学习ExtJS(一) 之基础前提
Oct 07 Javascript
基于jQuery的自动完成插件
Feb 03 Javascript
javascript测试题练习代码
Oct 10 Javascript
JavaScript常用的弹出广告及背投广告实现方法
Feb 06 Javascript
JQuery实现的按钮倒计时效果
Dec 23 Javascript
老生常谈onBlur事件与onfocus事件(js)
Jul 09 Javascript
javascript中BOM基础知识总结
Feb 14 Javascript
Postman内建变量常用方法实例解析
Jul 28 Javascript
antd-日历组件,前后禁止选择,只能选中间一部分的实例
Oct 29 Javascript
Antd-vue Table组件添加Click事件,实现点击某行数据教程
Nov 17 Javascript
vue项目中使用tinymce编辑器的步骤详解
Sep 11 #Javascript
VUE 实现滚动监听 导航栏置顶的方法
Sep 11 #Javascript
vue中的watch监听数据变化及watch中各属性的详解
Sep 11 #Javascript
vue axios数据请求get、post方法及实例详解
Sep 11 #Javascript
js监听html页面的上下滚动事件方法
Sep 11 #Javascript
vue 使用html2canvas将DOM转化为图片的方法
Sep 11 #Javascript
Vue项目数据动态过滤实践及实现思路
Sep 11 #Javascript
You might like
屏蔽浏览器缓存另类方法
2006/10/09 PHP
php实现CSV文件导入和导出
2015/10/24 PHP
php实现生成验证码实例分享
2016/04/10 PHP
PHP使用递归算法无限遍历数组示例
2017/01/13 PHP
Yii框架视图、视图布局、视图数据块操作示例
2019/10/14 PHP
Prototype Template对象 学习
2009/07/19 Javascript
JS画线(实例代码)
2013/11/20 Javascript
javaScript实现滚动新闻的方法
2015/07/30 Javascript
浅析Javascript ES6中的原生Promise
2016/08/25 Javascript
浅谈js中的引用和复制(传值和传址)
2016/09/18 Javascript
javascript使用闭包模拟对象的私有属性和方法
2016/10/05 Javascript
详解Webpack + ES6 最新环境搭建与配置
2018/06/04 Javascript
Node.js Koa2使用JWT进行鉴权的方法示例
2018/08/17 Javascript
JS中的算法与数据结构之列表(List)实例详解
2019/08/16 Javascript
微信小程序自定义弹出模态框禁止底部滚动功能
2020/03/09 Javascript
jQuery实现html可联动的百分比进度条
2020/03/26 jQuery
Vue使用Proxy代理后仍无法生效的解决
2020/11/13 Javascript
Vue 事件的$event参数=事件的值案例
2021/01/29 Vue.js
[35:26]DOTA2上海特级锦标赛B组小组赛#2 VG VS Fnatic第三局
2016/02/26 DOTA
python开发之IDEL(Python GUI)的使用方法图文详解
2015/11/12 Python
基于python select.select模块通信的实例讲解
2017/09/21 Python
python的unittest测试类代码实例
2017/12/07 Python
python爬取亚马逊书籍信息代码分享
2017/12/09 Python
Python3连接SQLServer、Oracle、MySql的方法
2018/06/28 Python
python读取word 中指定位置的表格及表格数据
2019/10/23 Python
荷兰鞋类购物网站:Donelli
2019/05/24 全球购物
英国名牌男装店:Standout
2021/02/17 全球购物
学生个人的自我评价分享
2013/11/05 职场文书
个人求职信范文分享
2014/01/06 职场文书
工程招投标邀请书
2014/01/30 职场文书
《雷雨》教学反思
2014/02/20 职场文书
行政副总岗位职责
2014/02/23 职场文书
大学信息公开实施方案
2014/03/09 职场文书
信用卡工资证明范本
2015/06/19 职场文书
MySQL索引失效的典型案例
2021/06/05 MySQL
springboot读取nacos配置文件
2022/05/20 Java/Android