.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=https://www.jb51.net/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=https://www.jb51.net/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=https://www.jb51.net/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=https://www.jb51.net/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=https://www.jb51.net/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 }) },
总结