使用vant和组件
json内容
{
"usingComponents": {
"van-search": "@vant/weapp/search/index",
"ListItem":"/components/ListItem/ListItem",
"van-loading": "@vant/weapp/loading/index"
},
"navigationBarTitleText": "搜索"
}
wxml内容
<!--pages/search/search.wxml-->
<van-search
value="{{ value }}"
placeholder="请输入搜索关键词"
show-action
input-align="center"
bind:search="onSearch"
bind:cancel="onCancel"
bind:change="onChange"
/>
<ListItem itemList="{{itemList}}" />
js
// pages/search/search.js
const {
goodsHttp
} = require('../../http/api')
import Toast from '../../miniprogram_npm/@vant/weapp/toast/toast.js';
Page({
/**
* 页面的初始数据
*/
data: {
value: '',
itemList: [],
Page: 1,
kong:''
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
this.init()
},
async init() {
try {
let {
goods: {
data
}
} = await goodsHttp({
title: this.data.value,
page: this.data.page
})
data.forEach(r => r.description = '书籍是人类进步的电梯书籍是人类进步的电梯')
if(this.data.page==1){
this.data.itemList=[]
}
this.setData({
itemList: [...this.data.itemList,...data]
})
if(!data.lenght){
this.setData({
kong:true
})
}else{
this.setData({
kong:false
})
}
Toast.clear();
} catch (err) {
console.log(err);
}
},
onChange(e) {
this.setData({
value: e.detail,
});
},
onSearch() {
// console.log('搜索' + this.data.value);
this.data.page=1;
this.init()
},
onCancel() {
// console.log('取消' + this.data.value);
this.data.value = '';
this.init()
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
this.data.page++;
Toast.loading({
message: '加载中...',
forbidClick: true,
duration:0
});
this.init()
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
