您好,登錄后才能下訂單哦!
不懂微信小程序如何實現(xiàn)搜索分頁功能??其實想解決這個問題也不難,下面讓小編帶著大家一起學(xué)習(xí)怎么去解決,希望大家閱讀完這篇文章后大所收獲。
直接上代碼:
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://cache.yisu.com/upload/information/20200623/112/127005.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({ /** * 頁面的初始數(shù)據(jù) */ data: { pageName: "", ShowLonding: { londing: false, message: "", contNone: false }, ...menuData.data, ...proData.pageData }, ...menuData.Methods, ...proData.methods, /** * 生命周期函數(shù)--監(jiān)聽頁面加載 */ onLoad: function (options) { }, /** * 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成 */ onReady: function () { }, /** * 生命周期函數(shù)--監(jiān)聽頁面顯示 */ onShow: function () { }, /** * 生命周期函數(shù)--監(jiān)聽頁面隱藏 */ onHide: function () { }, /** * 生命周期函數(shù)--監(jiān)聽頁面卸載 */ onUnload: function () { }, /** * 頁面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動作 */ onPullDownRefresh: function () { /* wx.showLoading({ title: '正在加載...', }); setTimeout(()=>{ wx.stopPullDownRefresh, wx.hideLoading(); },2000) */ }, /** * 頁面上拉觸底事件的處理函數(shù) */ onReachBottom: function () { /* wx.showToast({ title: '沒有更多數(shù)據(jù)', }) */ 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;//頁數(shù)默認(rèn)為1 var methods = { //分頁 getHttpProductMore: function () { var self = this; if (ispage) { ispage = false;//沒有下一頁ispage 賦值為false indexpage++; //頁數(shù)加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("更多的數(shù)據(jù)",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('搜索的數(shù)據(jù)',searchData); let that=this let clickEnter=1 httpClient.get(url.getSearchVegetables+"?cid="+"&Key="+searchData+"&pageId=1").then(function(r){ wx.hideLoading(); //console.log("搜索數(shù)據(jù)",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 }
感謝你能夠認(rèn)真閱讀完這篇文章,希望小編分享微信小程序如何實現(xiàn)搜索分頁功能?內(nèi)容對大家有幫助,同時也希望大家多多支持億速云,關(guān)注億速云行業(yè)資訊頻道,遇到問題就找億速云,詳細(xì)的解決方法等著你來學(xué)習(xí)!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。