微信小程序之搜索分页功能的实现代码
更新时间:2020年6月23日 07:35 点击:1943
直接上代码:
wxml:
<wxs src="../wxs/changeimg.wxs" module="changeimg" /> <view class="container"> <view class="search_input"> <image class="back" src="" mode="widthFix"></image> <input type="text" class="weui-input" maxlength="10" placeholder="搜索" value="{{value}}" bindinput="changeModel" bindconfirm="search" data-key="value"/> <image class="scan_code" src="" mode="widthFix" ></image> </view> <!--搜索菜品做法列表 --> <view class="modus_operandi"> <view class="search_no" wx:if="{{searchLen==0&&clickEnter==1}}" > <text>很抱歉,没有找到您要搜索的资料/(ㄒoㄒ)/~~</text> </view> <view class="modus_operandi_total" wx:for="{{searchData}}" wx:key="id" bindtap="jumpVegetables" data-cid="{{item.classid}}" > <image class="modus_operandi_pic" mode="widthFix" src="{{changeimg.getimageurl(item.defaultpic)}}"></image> <view class="modus_operandi_title">{{item.title}}</view> </view> </view> </view>
wxss:
page{ background: #fff; } .back{ width: 20rpx; height: 20rpx; margin-top: 39rpx; margin-right: 20rpx; margin-left: 20rpx; } .search_input { height: 110rpx; padding: 10rpx; background: url("https://mini.qianjiwang.cn/img/top.png")no-repeat center; background-size: 100% 700rpx; display: flex; position: relative; } .search_input input { height: 70rpx; background-color: #fff; border-radius: 50rpx; font-size: 32rpx; color: #000; width: 80%; margin-left: 0rpx; background: #a7d9fe; margin-top: 20rpx; padding-left: 30rpx; } .scan_code{ flex: 1; width: 40rpx; height: 40rpx; margin-left: 30rpx; margin-top: 27rpx; } .modus_operandi{ padding: 20rpx; display: flex; flex-wrap: wrap; margin-top: 50rpx; } .modus_operandi_total{ width: 47%; padding: 10rpx; } .modus_operandi_pic{ height:215rpx!important; border-radius: 10rpx; } .modus_operandi_title{ text-align: center; }
js:
// pages/pro/index.js import menuData from "../../bindData/rightMenuCtrl.js" import proData from "../../bindData/searchFoodData.js" Page({ /** * 页面的初始数据 */ data: { pageName: "", ShowLonding: { londing: false, message: "", contNone: false }, ...menuData.data, ...proData.pageData }, ...menuData.Methods, ...proData.methods, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { }, /** * 生命周期函数--监听页面显示 */ onShow: function () { }, /** * 生命周期函数--监听页面隐藏 */ onHide: function () { }, /** * 生命周期函数--监听页面卸载 */ onUnload: function () { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () { /* wx.showLoading({ title: '正在加载...', }); setTimeout(()=>{ wx.stopPullDownRefresh, wx.hideLoading(); },2000) */ }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function () { /* wx.showToast({ title: '没有更多数据', }) */ let that =this that.getHttpProductMore(); }, /** * 用户点击右上角分享 */ onShareAppMessage: function () { } })
searchFoodData.js:
var httpClient = require('../utils/HttpClient.js'); var tools = require('../utils/util.js'); import url from "../utils/apiUrl.js" var pageData = { inputValue:{}, searchData:{}, searchLen:'', clickEnter:'0', }; var ispage = true; var indexpage = 1;//页数默认为1 var methods = { //分页 getHttpProductMore: function () { var self = this; if (ispage) { ispage = false;//没有下一页ispage 赋值为false indexpage++; //页数加1 let searchData= this.data.inputValue.value//获取输入框的值 //console.log('页',indexpage); wx.showLoading({ title: '正在加载...', }); httpClient.get(url.getSearchVegetables+"?cid="+"&Key="+searchData+"&pageId="+indexpage).then(function (o) { //console.log("更多的数据",o); if (o.length > 0) {//如果长度大于0,使用concat连接起来,ispage赋值为true var tempData = self.data.searchData; tempData = tempData.concat(o) self.setData({ searchData: tempData }) ispage = true; wx.hideLoading() } else { wx.showToast({ title: '没有更多了', }); indexpage = 1; } }); } }, search(e){ ispage = true wx.showLoading({ title: '正在加载...', }); let searchData= this.data.inputValue.value console.log('搜索的数据',searchData); let that=this let clickEnter=1 httpClient.get(url.getSearchVegetables+"?cid="+"&Key="+searchData+"&pageId=1").then(function(r){ wx.hideLoading(); //console.log("搜索数据",r); let searchData=r let searchLen=r.length that.setData({ searchData, searchLen, clickEnter }) }) } , changeModel(e){ let data={}; data[e.currentTarget.dataset.key] = e.detail.value this.setData({ inputValue:data }) //console.log(data); // console.log('data',this.data.inputValue); } , jumpVegetables(e){ const {cid}=e.currentTarget.dataset wx.navigateTo({ url: '/pages/vegetable-index/vegetable-index?cid='+cid, success: (result)=>{ }, }); } } module.exports = { pageData: pageData, methods: methods }
总结
到此这篇关于微信小程序之搜索分页功能的实现代码的文章就介绍到这了,更多相关小程序搜索分页内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞!
上一篇: 浅谈JAVA 类加载器
相关文章
- 我们这里介绍php与KindEditor编辑器使用时如何利用KindEditor编辑器的分页功能实现文章内容分页,KindEditor编辑器在我们点击分页时会插入代码,我们只要以它为分切符,就...2016-11-25
- 最近接了一个项目,其中有需求要用到jquery分页控件,上网也找到了需要分页控件,各种写法各种用法,都是很复杂,最终决定自己动手写一个jquery分页控件,全当是练练手了。写的不好,还请见谅,本分页控件在chrome测试过,其他的兼容性...2015-10-30
- 这篇文章主要介绍了微信小程序 页面传值详解的相关资料,需要的朋友可以参考下...2017-03-13
- 本文实例讲述了jquery实现的伪分页效果代码。分享给大家供大家参考,具体如下:这里介绍的jquery伪分页效果,在火狐下表现完美,IE全系列下有些问题,引入了jQuery1.7.2插件,代码里有丰富的注释,相信对学习jQuery有不小的帮助,期...2015-10-30
- 这篇文章主要介绍了vue+高德地图实现地图搜索及点击定位操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-09
- Vue.js通过简洁的API提供高效的数据绑定和灵活的组件系统.这篇文章主要介绍了vue.js 表格分页ajax 异步加载数据的相关资料,需要的朋友可以参考下...2016-10-20
- 这篇文章主要为大家详细介绍了微信小程序自定义tabbar组件,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-03-14
- 这篇文章主要介绍了微信小程序 二维码生成工具 weapp-qrcode详解,教大家如何在项目中引入weapp-qrcode.js文件,通过实例代码给大家介绍的非常详细,需要的朋友可以参考下...2021-10-23
- 这篇文章主要介绍了微信小程序 网络请求(GET请求)详解的相关资料,需要的朋友可以参考下...2016-11-22
- 这篇文章主要给大家介绍了关于微信小程序如何获取图片宽度与高度的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-03-10
Springboot如何使用mybatis实现拦截SQL分页
这篇文章主要介绍了Springboot使用mybatis实现拦截SQL分页,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-06-19- 在php中要实现分页比起asp中要简单很多了,我们核心就是直接获取当前页面然后判断每页多少再到数据库中利用limit就可以实现分页查询了,下面我来详细介绍分页类实现程序...2016-11-25
- 这篇文章主要介绍了微信小程序(应用号)开发新闻客户端实例的相关资料,需要的朋友可以参考下...2016-10-25
- 这篇文章主要介绍了微信小程序手势操作之单触摸点与多触摸点的相关资料,需要的朋友可以参考下...2017-03-13
- 本文实例讲述了jquery实现的伪分页效果代码。分享给大家供大家参考,具体如下:这里介绍的jquery伪分页效果,在火狐下表现完美,IE全系列下有些问题,引入了jQuery1.7.2插件,代码里有丰富的注释,相信对学习jQuery有不小的帮助,期...2015-10-30
- 这篇文章主要为大家详细介绍了AngularJS实现分页显示数据库信息效果的相关资料,感兴趣的小伙伴们可以参考一下...2016-07-06
- 这篇文章主要介绍了微信小程序 页面跳转传递值几种方法详解的相关资料,需要的朋友可以参考下...2017-01-16
- 这篇文章主要为大家详细介绍了微信小程序实现canvas分享朋友圈海报,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-06-21
- 这篇文章主要为大家详细介绍了微信小程序实现点击导航条切换页面,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-11-19
- 这篇文章主要介绍了基于jquery实现表格无刷新分页,功能实现了前端排序功能,增加了前端搜索功能,感兴趣的小伙伴们可以参考一下...2016-01-08