<van-search
value="{{ value }}"
placeholder="请输入搜索关键词"
show-action
input-align="center"
bind:search="onSearch"
bind:cancel="onCancel"
bind:change="onChange"
background="#4fc08d"
/>
<ListItem itemList="{{itemList}}" />
<view wx:if="{{kong}}" style="padding: 20pxtext-align: center">无更多数据</view>
<van-toast id="van-toast" />
{
"usingComponents": {
"van-search": "@vant/weapp/search/index",
"ListItem":"/components/ListItem/ListItem",
"van-toast": "@vant/weapp/toast/index"
},
"navigationBarTitleText": "搜索",
"enablePullDownRefresh": true,
"onReachBottomDistance": 0
}
const { goodsHttp } = require('../../http/api')
import Toast from '../../miniprogram_npm/@vant/weapp/toast/toast.js'
Page({
data: {
value: ''念激,
itemList:[],
page:1,
kong:false,
isloding:true
},
onLoad(){
this.init()
if(this.data.isloding)return this.init()
},
async init(){
try{
this.setData({
isloding:false
})
wx.showLoading({
title: '别急哦~',
启岁})
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.length){
this.setData({
kong:true
})
}
else{
this.setData({
kong:false
})
}
Toast.clear()
wx.hideLoading()
this.setData({
isloding:true
})
}catch(err){
console.log(err)
}
},
onReachBottom(){
this.data.page++
this.init()
},
onChange(e) {
this.setData({
value: e.detail,
})
},
onSearch() {
this.data.page = 1
this.init(this.data.value)
console.log('搜索' + this.data.value)
},
悄高睁onCancel() {
/* encodeURIComponent('微信小程序') 转码
decodeURIComponent("%E4%BD%A0%E6%98%AF%E5%82%BB%E9%80%BC") 解码
*/
this.data.value = ''
this.init()
this.data.page = 1
console.log('取消' + this.data.value)
},
onPullDownRefresh: function () {
this.data.page=1
this.init()
},
})
<!--components/ListItem/ListItem.wxml-->
<block wx:for="{{itemList}}" wx:key="index">
<view class="flex item" bindtap="go" data-url="{{item.cover_url}}">
<image class="img1" src="{{item.cover_url}}"></image>
<view class="row">
<view class="title">
{{item.title}}
</view>
<view class="dec {{item.price?'van-multi-ellipsis--l2':'van-multi-ellipsis--l3'}}">
{{item.description}}
</view>
<view class="common-sty" wx:if="{{item.price}}">
<text>价格:{{item.price}}</text>
<text>销量:{{item.sales}}</text>
<text>收藏人数:{{item.collects_count}}</text>
</view>
</view>
</view>
</block>
/* components/ListItem/ListItem.wxss */
/* @import '@vant/weapp/common/index.wxss' */
@import '/miniprogram_npm/@vant/weapp/common/index.wxss'
.flex{
display: flex
}
.item{
padding:5px
}
.img1{
width: 120px
height: 120px
display: block
border-radius: 5px
}
.row{
flex:1
height: 120px
}
.title{
padding:10px
text-overflow: ellipsis
display: -webkit-box
-webkit-line-clamp: 1
word-break: break-all
-webkit-box-orient: vertical
height:14px
overflow: hidden
}
.dec{
padding: 0 10px
margin-top: 10px
}
.common-sty{
font-size: 12px
padding:10px
color:rgb(66, 64, 64)
}
.common-sty text{
margin-right: 10px
}
{
"component": true,
"usingComponents": {}
}
// components/ListItem/ListItem.js
Component({
/**
* 组件的属性列表
*/
properties: {
itemList:{
type:Array,
value:[{
cover_url:"https://oss.shop.eduwork.cn/product/2020-0820-5f3e15bc69891.png",
title:"人类的书籍",
description:"人类进步的阶梯人类进步的阶梯"
}]
},
},
/**
* 组件的初始数据
*/
data: {
},
/**
* 组件的方法列表
*/
methods: {
go(e){
let url = e.currentTarget.dataset.url
wx.navigateTo({
url: '/pages/web/web?url='+url,
})
}
}
})
联系小程序管理员。小程序报错处理办法:登录小程序,进入开发管理,开发版卖旦源本中展示已上传的代码,管理员可提交审核或删除代码,代码审核7个工作日。
小程序(MiniProgram)是一种不需要下载安装即可使迟尘用的应用,由腾讯于2017年1月9日首次推出,其理念是应用“触手可中态及"“用完即走”。其优势是用户不用再关心应用安装太多的问题,也避免了频繁的切换应用。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)