<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,
})
}
}
})
找微信小程序的 *** 作方法如下：1、在手机 *** 作界面找到微信，如下图箭头所示，点击打开。
/iknow-pic.cdn.bcebos.com/ac345982b2b7d0a28bf2edc7c6ef76094b369ab5"握穗target="_blank"title="点击查看大图"class="ikqb_img_alink">/iknow-pic.cdn.bcebos.com/ac345982b2b7d0a28bf2edc7c6ef76094b369ab5?x-bce-process=image%2Fresize%2Cm_lfit%2Cw_600%2Ch_800%2Climit_1%2Fquality%2Cq_85%2Fformat%2Cf_auto"esrc="https://iknow-pic.cdn.bcebos.com/ac345982b2b7d0a28bf2edc7c6ef76094b369ab5"/>
2、在微信界面找到发现点击打开，如下图所示。
/枝知iknow-pic.cdn.bcebos.com/eac4b74543a98226d9cac27d8782b9014a90eb65"target="_blank"title="点击查看大图"class="ikqb_img_alink">/iknow-pic.cdn.bcebos.com/eac4b74543a98226d9cac27d8782b9014a90eb65?x-bce-process=image%2Fresize%2Cm_lfit%2Cw_600%2Ch_800%2Climit_1%2Fquality%2Cq_85%2Fformat%2Cf_auto"esrc="https://iknow-pic.cdn.bcebos.com/eac4b74543a98226d9cac27d8782b9014a90eb65"/>
3、在打开发现后，在最下面可以看到小程序，如下图所示。
/iknow-pic.cdn.bcebos.com/fcfaaf51f3deb48f26984f84fd1f3a292cf578f3"target="_blank"title="点击查看大图"class="ikqb_img_alink">/iknow-pic.cdn.bcebos.com/fcfaaf51f3deb48f26984f84fd1f3a292cf578f3?x-bce-process=image%2Fresize%2Cm_lfit%2Cw_600%2Ch_800%2Climit_1%2Fquality%2Cq_85%2Fformat%2Cf_auto"esrc="https://iknow-pic.cdn.bcebos.com/fcfaaf51f3deb48f26984f84fd1f3a292cf578f3"/>
4、在小程段搭卜序里可以看到更多的小程序，如下图红色方框所示。
/iknow-pic.cdn.bcebos.com/83025aafa40f4bfbf11a700e0e4f78f0f63618a5"target="_blank"title="点击查看大图"class="ikqb_img_alink">/iknow-pic.cdn.bcebos.com/83025aafa40f4bfbf11a700e0e4f78f0f63618a5?x-bce-process=image%2Fresize%2Cm_lfit%2Cw_600%2Ch_800%2Climit_1%2Fquality%2Cq_85%2Fformat%2Cf_auto"esrc="https://iknow-pic.cdn.bcebos.com/83025aafa40f4bfbf11a700e0e4f78f0f63618a5"/>
5、还有在微信主界面最上端向下滑动，箭头所示，可以直接找到小程序的。
/iknow-pic.cdn.bcebos.com/060828381f30e92489f0746b41086e061d95f710"target="_blank"title="点击查看大图"class="ikqb_img_alink">/iknow-pic.cdn.bcebos.com/060828381f30e92489f0746b41086e061d95f710?x-bce-process=image%2Fresize%2Cm_lfit%2Cw_600%2Ch_800%2Climit_1%2Fquality%2Cq_85%2Fformat%2Cf_auto"esrc="https://iknow-pic.cdn.bcebos.com/060828381f30e92489f0746b41086e061d95f710"/>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）