1

app.json

@@ -21,7 +21,8 @@
         "van-nav-bar": "@vant/weapp/nav-bar/index",
         "van-tabbar": "@vant/weapp/tabbar/index",
         "van-tabbar-item": "@vant/weapp/tabbar-item/index",
-        "van-uploader": "@vant/weapp/uploader/index"
+        "van-uploader": "@vant/weapp/uploader/index",
+        "van-picker": "@vant/weapp/picker/index"
     },
     "window": {
         "backgroundTextStyle": "light",

pages/home/index.js

@@ -6,12 +6,51 @@ Page({
      */
     data: {
         frameStyle: { useTop: true, name: '首页', leftArrow: false, useBar: true },
+        searchInfo: {
+            name: '',
+            type: ''
+        },
+        // 查询选项
+        searchType: '0',
+        btnList: [
+            {
+                title: '运动类型',
+                icon: 'arrow-down',
+                value: '0'
+            }, {
+                title: '城市',
+                icon: 'arrow-down',
+                value: '1'
+            }, {
+                title: '比赛状态',
+                icon: 'arrow-down',
+                value: '2'
+            }
+        ],
+        typeList:[
+            {
+                
+            }
+        ]
     },
     // 跳转菜单
     tabPath(e) {
         let { route } = e.detail.detail;
         if (route) wx.redirectTo({ url: `/${route}` })
     },
+    //搜索
+    onSearch() {
+        console.log("搜索");
+    },
+    searchChange: function (e) {
+        const that = this;
+        const { value } = e.currentTarget.dataset;
+        that.setData({ searchType: value })
+    },
+    // 值选择
+    changeValue: function (e) {
+        console.log(e);
+    },
     /**
      * 生命周期函数--监听页面加载
      */

pages/home/index.less

@@ -1,4 +1,20 @@
 .main {
     height: 80.8vh;
     background-color: #ff0000;
+
+    .one {
+        width: 100%;
+    }
+
+    .two {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-around;
+        width: 96vw;
+        background-color: #00ffff;
+
+        .list {
+            padding: 2vw 0;
+        }
+    }
 }

pages/home/index.wxml

@@ -1,5 +1,34 @@
 <mobile-main frameStyle="{{frameStyle}}" bind:back="back" bind:tabPath="tabPath">
     <view slot="info" class="container main">
-        系统首页
+        <view class="one">
+            <van-search value="{{ searchInfo.name }}" placeholder="请输入搜索关键词" show-action bind:search="onSearch" bind:cancel="onCancel" />
+        </view>
+        <view class="two">
+            <view class="list" wx:for="{{btnList}}" wx:key="item" bindtap="searchChange" data-value="{{item.value}}">
+                <view wx:if="{{searchType=='0'}}">
+                    <picker mode="selector" bindchange="typeChange" range="{{typeList}}" range-key="value">
+                        <view class="picker">
+                            <text>{{searchInfo.type||item.title}}</text>
+                            <van-icon name="{{item.icon}}" />
+                        </view>
+                    </picker>
+                </view>
+                <view wx:elif="{{searchType=='1'}}">
+                    1
+                </view>
+                <view wx:elif="{{searchType=='2'}}">
+                    2
+                </view>
+            </view>
+            <!-- <picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
+                <view class="picker">
+                    运动类型
+                </view>
+            </picker> -->
+            <!-- <view class="list" wx:for="{{btnList}}" wx:key="item" bindtap="searchChange" data-value="{{item.value}}">
+                <text>{{item.title}}</text>
+                <van-icon name="{{item.icon}}" />
+            </view> -->
+        </view>
     </view>
 </mobile-main>

pages/home/index.wxss

@@ -2,3 +2,16 @@
   height: 80.8vh;
   background-color: #ff0000;
 }
+.main .one {
+  width: 100%;
+}
+.main .two {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+  width: 96vw;
+  background-color: #00ffff;
+}
+.main .two .list {
+  padding: 2vw 0;
+}

project.config.json

@@ -52,9 +52,9 @@
     "libVersion": "2.19.4",
     "appid": "wx34436977cd1e02e4",
     "projectname": "mobile-template",
-    "condition": {},
     "editorSetting": {
         "tabIndent": "insertSpaces",
         "tabSize": 4
-    }
+    },
+    "condition": {}
 }