導航:首頁 > 軟體知識 > 小程序怎麼弄搜索欄

小程序怎麼弄搜索欄

發布時間:2023-06-01 09:00:01

小程序簡單的搜索欄

<!--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.ework.cn/proct/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.在首頁做一個搜索框的樣式並實現跳轉到搜索頁面
2.具體代碼無法貼上來。

㈢ 微信小程序怎麼弄出來

微信小程序查找的具體操作方法如下:

工具:華為手機、微信APP。

1、在手機操作界面找到微信,點擊打開。

㈣ 微信怎麼搜索小程序

1、直接在首屏「微信」中搜索:直接在微信的首屏搜索欄中搜索相應的小程序名稱,則會出現相應的微信小程序,且搜索結果按照「小程序、公眾號、朋友圈、相關文章」的順序排列。

2、微信「發現」界面中的「小程序戚磨」入口:在微信「發現」界高銀斗面最下面一欄,出現了「小程序」入口。不過,目前這個入口並不是所有人都能看到。

3、通過好友分享後點擊進入:通過好友或者是微信群分享的小程序鏈接搏檔,也將成為微信小程序的最重要傳播路徑。你可以在進入小程序名片界面後點擊右上角,把它推薦給你的朋友或者群。

㈤ 微信怎麼添加導航小程序

在微信的指冊日常使用過程中,很多用戶出門需要用到導航功能,在陌生的地方可以依靠導航來尋路,但是還是有一些用戶不知道怎麼該怎麼添加導航的小程序,在哪裡設置添加,今天就讓姿逗陪我帶著大家一起去看一看吧,接下來就是關於微信怎麼添加導航小程序的方法分享。
怎麼添加導航小程序
打開微信
首先需要用戶打開微信,進入到發現功能的頁面,找到搜一搜的功能選項,點擊並進入到搜索頁面中。
搜索查找
在搜索頁面中,跡蠢點擊搜索欄輸入導航並查找。
地圖小程序
在搜索結果中,找到騰訊地圖小程序,點擊並進入到該小程序的頁面中。
更多服務
在騰訊地圖的小程序頁面中,找到右上角的三點功能選項,點擊並進入到更多服務的頁面中。
添加小程序
在更多服務的功能頁面中,找到關於添加小程序的功能選項,點擊即可添加到我的小程序頁面。

㈥ 微信帶小程序搜索的下拉框怎麼設置

手寫程序代碼。
1、首先在json中調用van-tab組件。
2、在js中對菜單進行設置。option:設置菜單內容;value:設置菜單內容的排列順序嘩慎。
3、最後,在wxml中悉豎實現,Active-color設置選中狀態顏色;Value設置排列順序;Option菜單內容睜蘆大。

㈦ 微信小程序怎麼搜索

登錄微信-點擊打開發現-選擇頁面底部小程序-點擊屏幕上方的搜索小程序即可

望採納~

㈧ 小程序在微信上怎麼搜索

在微閉鋒握信【發現】這個頁面,轎慶找到【小程序】

㈨ 如何在小程序導航欄放一個搜索框

search.wxml部分內容:
<view class='search_box page_row'>
<view class='search'>
<view class='search_item'>
<icon class='search_icon' size='20'咐皮 type='search'>衡肆差</icon>
<input value='' placeholder='搜索您要找的商品' bindinput='bindInput'/>
</view>
</view>
<view class='search_btn' bindtap='search'>搜索</view>
</view>
search.wxss樣式雹好部分:

.search_box{width:100%;background:#2587f1;padding:0 0 10px;display: flex;flex-direction: row}
.search{width: calc( 100% - 64rpx );}
.search_item{border: 1px solid #d0d0d0;border-radius: 10rpx;margin-left: 20rpx;background:#fff;}
.search_item input{margin-left: 60rpx;height: 60rpx;border-radius: 5px;background:#fff;}
.search_btn{width: 15%;height: 60rpx;line-height:60rpx;text-align: center;background:transparent;color:#fff;}
.search_icon{margin: 10rpx 10rpx 10rpx 10rpx;position: absolute;left:25rpx;z-index: 2;width: 20px;height: 20px;text-align: center;}

㈩ 微信小程序沒有搜索功能怎麼辦

使用微信搜索「小程序示例」,在搜索結果中點擊「小程序示例」進入小程序展示界面,然後退出此界面,回到「發現」列表,即可看到最下方顯示的小程序入口。重啟一下微信試一下看看能不能出現。如果還是不行可能是微信系統問題建議打開設置幫助反饋一下。建議您反饋一下微信客服,可能是微信系統異常問題。不用太擔心反饋給客服24小時會幫助您的。

閱讀全文

與小程序怎麼弄搜索欄相關的資料

熱點內容
淘寶交易延長多久 瀏覽:341
為什麼韻達寄快遞要在小程序上寄 瀏覽:572
電表換個名字需要什麼程序 瀏覽:29
江蘇有什麼電流測量儀表代理商 瀏覽:63
套數據用的公式有哪些 瀏覽:419
設計引流產品怎麼做 瀏覽:853
哪裡有古老古董市場 瀏覽:807
百色東盟農貿市場是哪個公司投資 瀏覽:71
情侶空間小程序入口蘋果怎麼進 瀏覽:641
開拓市場怎麼那麼難 瀏覽:825
學生注冊企業微信程序是什麼 瀏覽:159
回信息一個嗯和嗯嗯有什麼區別 瀏覽:457
日本的內燃機車市場什麼樣子的 瀏覽:654
相冊製作小程序怎麼做 瀏覽:556
怎麼樣用ug設計產品 瀏覽:740
如何一個表的數據導到另一個表裡 瀏覽:43
倉庫保管技術有哪些 瀏覽:350
申請離婚的程序有什麼風險 瀏覽:502
茅台代理商有多少家 瀏覽:590
交易賬單怎麼審核 瀏覽:914