商学院

pages/college/index.js

@@ -1,11 +1,38 @@
-// pages/college/index.js
+const getHeight = require("../../utils/getRheRemainingHeight");
+
 Page({
 
     /**
      * 页面的初始数据
      */
     data: {
-
+        scrollHeight: 0, //滚动区域高度
+        searchContent: "", //搜索内容
+        mainActiveIndex: 0, //分类选择器打开分类的下标
+        activeId: null, //分类选择器选择id
+        items: [{
+            text: '所有城市',
+            children: [{
+                    text: '温州',
+                    id: '温州',
+                },
+                {
+                    text: '杭州',
+                    id: '杭州',
+                },
+            ],
+        }, {
+            text: '可选城市',
+            children: [{
+                    text: '嘉兴',
+                    id: '嘉兴',
+                },
+                {
+                    text: '台州',
+                    id: '台州',
+                },
+            ],
+        }, ]
     },
 
     /**
@@ -14,12 +41,33 @@ Page({
     onLoad(options) {
 
     },
+    onClickNav({
+        detail = {}
+    }) {
+        this.setData({
+            mainActiveIndex: detail.index || 0,
+        });
+    },
 
+    onClickItem({
+        detail = {}
+    }) {
+        const activeId = this.data.activeId === detail.id ? null : detail.id;
+        console.log(activeId)
+        this.setData({
+            activeId
+        });
+    },
     /**
      * 生命周期函数--监听页面初次渲染完成
      */
     onReady() {
-
+        //滚动区域高度
+        getHeight.getHeight('.menu', this).then(res => {
+            this.setData({
+                scrollHeight: res
+            })
+        })
     },
 
     /**

pages/college/index.json

@@ -1,3 +1,4 @@
 {
+    "navigationBarTitleText": "商学院",
     "usingComponents": {}
 }

pages/college/index.scss

@@ -1,5 +1,7 @@
 @import '/static/unread.wxss';
 @import '../../components/My_card/index.scss';
+@import '/static/dropdown-switch.wxss';
+
 
 /* 课程 */
 .course {

pages/college/index.wxml

@@ -1,10 +1,23 @@
 <van-search value="{{ value }}" shape="round" background="var(--primary)" placeholder="请输入搜索关键词" />
-<view class="unread">总共15个，有1个更新</view>
-<navigator url="/pages/college/detail" class="course my-card" wx:for="{{5}}">
-    <van-image width="230rpx" height="120rpx" custom-class='cover-img' lazy-load fit='cover' src="https://img.yzcdn.cn/vant/cat.jpeg" />
-    <view class="explian">
-        <view class="title line-1">标题标题标题表头标题标题标题表头</view>
-        <view class="details line-1">标题标题标题表头标题标题标题表头</view>
-        <view class="read line-1">5人已经阅读</view>
+
+<!-- 下拉菜单 -->
+<van-dropdown-menu class="menu" activeColor='var(--assist)'>
+    <van-dropdown-item id="item" title="{{activeId||'默认'}}">
+        <van-tree-select items="{{ items }}" main-active-class='main-active' content-active-class='content-active' main-active-index="{{ mainActiveIndex }}" active-id="{{activeId}}" bind:click-nav="onClickNav" bind:click-item="onClickItem" />
+    </van-dropdown-item>
+    <view class="switch">
+        <My_switch></My_switch>
     </view>
-</navigator>
+</van-dropdown-menu>
+<!-- 列表 -->
+<My_listBox height='{{scrollHeight}}'>
+    <view class="unread">总共15个，有1个更新</view>
+    <navigator url="/pages/college/detail" class="course my-card" wx:for="{{5}}">
+        <van-image width="230rpx" height="120rpx" custom-class='cover-img' lazy-load fit='cover' src="https://img.yzcdn.cn/vant/cat.jpeg" />
+        <view class="explian">
+            <view class="title line-1">标题标题标题表头标题标题标题表头</view>
+            <view class="details line-1">标题标题标题表头标题标题标题表头</view>
+            <view class="read line-1">5人已经阅读</view>
+        </view>
+    </navigator>
+</My_listBox>