微信小程序分类和搜索

制作一个分类页面

先配置tabBar页面:

{
    "pagePath": "pages/search/search",
     "text": "搜索",
     "iconPath": "/images/search.png",
    "selectedIconPath": "/images/search_active.png"
}

json中配置需要用到的组件：

 "usingComponents": {
    "ListItem":"/components/ListItem/ListItem"
  },

wxml页面

<view class="flex">
    <view class="left-menu">
        <view class="item {{item.flag?'active':''}}" wx:for="{{categories}}" wx:key="index"
            data-i="{{index}}"
            bindtap="handler"
        >
            {{item.name}}
        </view>
    </view>
    <view class="right-content">
        <ListItem itemList="{{itemList}}" wx:if="{{itemList.length}}"></ListItem>
        //利用组件渲染数据
        <view wx:else style="padding:10px;text-align: center;">数据被外星人抓走了！！</view>
        //数据加载失败时的提示
    </view>
</view>

js

const { indexHttp } = require('../../http/api')
//调用外部函数
data: {
        categories:[],
        itemList:[]
    },
//data部分
 onLoad: function (options) {
        this.init();
    },   

async init(){
        try{
            let {categories} = await indexHttp({})
            /* 把从后台获取的数组 加上flag属性都设置成false
            保证不会被选中 */
            categories.forEach(r=>{
                r.flag = false;
            })
            /* 默认第一项是选中的状态  所以把数组的第一项的flag改成true */
            categories[0].flag = true;
            categories[0].children.forEach(r=>{
                r.cover_url = "https://oss.shop.eduwork.cn/product/2020-0820-5f3e15bc69891.png";
                r.title = r.name;
                r.description = "人类进步的阶梯人类进步的阶梯"
            })
            this.setData({
                categories,
                itemList:categories[0].children
            })
        }catch(err){
            console.log(err)
        }
    },
    handler(e){
        let {currentTarget:{dataset:{i}}} = e;
        /* 利用排他思想把所有的flag改成false 把当前的点击的flag改成true */
        this.data.categories.forEach(r=>{
            r.flag = false;
        })
        this.data.categories[i].flag = true;
        this.data.categories[i].children.forEach(r=>{
            r.cover_url = "https://oss.shop.eduwork.cn/product/2020-0820-5f3e15bc69891.png";
            r.title = r.name;
            r.description = "人类进步的阶梯人类进步的阶梯"
        })
        this.setData({
            categories:this.data.categories,
            itemList:this.data.categories[i].children
        })
    },

wxss

/* pages/classify/classify.wxss */
.left-menu{
    width: 120px;
    height: 100vh;
    background-color: #f2f2f2;
    overflow-y:auto;
    color:#fff;
}
.item{
    padding:15px;
    text-align: center;
    background-color: coral;
    border-bottom: 1px solid #f2f2f2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.right-content{
    flex:1;
    background-color: #f2f2f2;
    height: 100vh;
    overflow: auto;
}
.active{
    background-color: yellow;
    color:#000;
    position: relative;
}
.active::before{
    content: '';
    display: block;
    width: 5px;
    height: 30px;
    position: absolute;
    left:0;
    background-color: red;
    top:50%;
    /* margin-top:-15px; */
    transform: translateY(-50%);
}

搜索页面

利用组件：

"usingComponents": { "van-search": "@vant/weapp/search/index" }

选择一个搜索框

<van-search value="{{ value }}" placeholder="请输入搜索关键词" 
show-action 
input-align="center"
bind:search="onSearch" 
bind:cancel="onCancel" 
bind:change="onChange"
/>

相应需要用到的js

Page(
{ 
data: { value: '', }, 
onChange(e) { this.setData({ value: e.detail, }); }, 
onSearch() { Toast('搜索' + this.data.value); }, 
onClick() { Toast('搜索' + this.data.value); }, });