小程序简单的搜索栏

Posted 2023-02-27

参考技术A <!--pages/search/search.wxml-->

<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: 20px;text-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,

            )

        

    

)