1.tabbar、组件实现搜索

文章目录
         1.tabbar

         2.主题颜色

         3.组件实现搜索框

1.tabbar

{"pages":["pages/index/index","pages/category/index","pages/goods_list/index","pages/goods_detail/index","pages/cart/index","pages/collect/index","pages/order/index","pages/search/index","pages/user/index","pages/feedback/index","pages/login/index","pages/auth/index","pages/pay/index"
],"window":{"backgroundTextStyle":"light","navigationBarBackgroundColor": "#fff","navigationBarTitleText": "电商实践","navigationBarTextStyle":"black"},"tabBar": {"color": "#999",       //导航栏未选中时的颜色"selectedColor": "#ff2d4a", //选中时颜色"backgroundColor": "#fafafa ","position": "bottom","borderStyle": "black","list": [{"pagePath": "pages/index/index","text": "首页","iconPath": "icons/home.png","selectedIconPath": "icons/home-o.png"},{"pagePath": "pages/category/index","text": "分类","iconPath": "icons/category.png","selectedIconPath": "icons/category-o.png"},{"pagePath": "pages/cart/index","text": "购物车","iconPath": "icons/cart.png","selectedIconPath": "icons/cart-o.png"},{"pagePath": "pages/user/index","text": "我的","iconPath": "icons/my.png","selectedIconPath": "icons/my-o.png"}]},"sitemapLocation": "sitemap.json"
}

2.主题颜色
app.wxss

page{
/* 定义主题颜色 */--themeColor: #eb4450;
}

3.组件实现搜索框
SearchInput.less

.search_input{height: 90rpx;padding: 10rpx;background-color: var(--themeColor);navigator{height: 100%;display: flex;justify-content: center;align-items: center;background-color: #fff;border-radius: 15rpx;}

SearchInput.wxml

<view class="search_input"><navigator url="/pages/search/index" open-type="navigate">搜索</navigator>
</view>

index.json

{"usingComponents": {"SearchInput":"../../components/SearchInput/SearchInput"},"navigationBarTitleText": "电商首页"
}

index.wxml

<view class="pyg_index">
<!-- 搜索框开始 -->
<SearchInput></SearchInput>
<!-- 搜索框结束 -->
</view>