基础框架

.hbuilderx/launch.json

@@ -0,0 +1,16 @@
+{ // launch.json 配置了启动调试时相关设置，configurations下节点名称可为 app-plus/h5/mp-weixin/mp-baidu/mp-alipay/mp-qq/mp-toutiao/mp-360/
+  // launchtype项可配置值为local或remote, local代表前端连本地云函数，remote代表前端连云端云函数
+    "version": "0.0",
+    "configurations": [{
+     	"default" : 
+     	{
+     		"launchtype" : "local"
+     	},
+     	"mp-weixin" : 
+     	{
+     		"launchtype" : "local"
+     	},
+     	"type" : "uniCloud"
+     }
+    ]
+}

App.vue

@@ -12,4 +12,9 @@ export default {
 <style lang="scss">
 /* 注意要写在第一行，同时给style标签加入lang="scss"属性 */
 @import "uview-ui/index.scss";
+
+body,
+page {
+	background: #F7F7F7;
+}
 </style>

manifest.json

@@ -50,9 +50,12 @@
     "quickapp" : {},
     /* 小程序特有相关 */
     "mp-weixin" : {
-        "appid" : "",
+        "appid" : "wx08b337e860e3ea58",
         "setting" : {
-            "urlCheck" : false
+            "urlCheck" : false,
+            "es6" : true,
+            "postcss" : true,
+            "minified" : true
         },
         "usingComponents" : true
     },

pages/index/cloud/dataBank.vue

@@ -0,0 +1,17 @@
+<template>
+    <view>
+        资料库
+    </view>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+
+        }
+    },
+}
+</script>
+
+<style lang="scss"></style>

pages/index/index.vue

@@ -1,22 +1,42 @@
 <template>
 	<view>
+		<index ref="首页" v-show="page == '首页'" />
+		<dataBank ref="资料库" v-show="page == '资料库'" />
+		<bottom-suspension-frame ref="pages" @onChange="pageChange" />
 	</view>
 </template>
 
-<script lang="ts">
+<script>
+import index from './index/index.vue'
+import dataBank from './cloud/dataBank.vue'
+
+import bottomSuspensionFrame from "./modules/bottomSuspensionFrame.vue";
 export default {
+	components: { bottomSuspensionFrame, index, dataBank },
 	data() {
 		return {
+			swiperItemID: 'cloud',
+			page: '资料库'
 		}
 	},
 	onLoad() {
-
+	},
+	onShow() {
+		// #ifdef MP-WEIXIN
+		this.updatePageData(this.swiperItemID, this.page)
+		// #endif
 	},
 	methods: {
-
+		updatePageData(itemId, page) {
+			this.$refs.pages.onClick(itemId, page)
+		},
+		pageChange(detail) {
+			// this.$refs[detail.name]
+			setTimeout(() => { detail.callBack() }, 300)
+			console.log("切换页面", detail)
+		}
 	}
 }
 </script>
 
-<style lang="scss">
-</style>
+<style lang="scss"></style>

pages/index/index/index.vue

@@ -0,0 +1,13 @@
+<template>
+    <text>
+        首页
+    </text>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style></style>

pages/index/modules/bottomSuspensionFrame.vue

@@ -0,0 +1,136 @@
+<template>
+    <swiper class="box" :current-item-id="current" circular vertical disable-touch>
+        <swiper-item class="swiper-item" item-id="index">
+            <image class="image" src="/static/c+selected.svg" mode="widthFix"
+                @click="onClick('cloud', cloudLastPage || '资料库')" />
+            <view class="item" v-for="item in index" :key="item.name"
+                @click="item.name == showPageName ? update() : onClick('index', item.name)">
+                <u-loading-icon v-if="item.loading" mode="circle" />
+                <text v-else :style="{ fontWeight: item.name == showPageName ? 'bold' : 'normal' }">
+                    {{ item.name }}
+                </text>
+            </view>
+        </swiper-item>
+        <swiper-item class="swiper-item" item-id="cloud">
+
+            <view class="item" v-for="item in cloud" :key="item.name"
+                @click="item.name == showPageName ? update() : onClick('cloud', item.name)">
+                <u-loading-icon v-if="item.loading" mode="circle" />
+                <text v-else :style="{ fontWeight: item.name == showPageName ? 'bold' : 'normal' }">
+                    {{ item.name }}
+                </text>
+            </view>
+
+            <image class="image" src="/static/c+unselected.svg" mode="widthFix"
+                @click="onClick('index', indexLastPage || '首页')" />
+        </swiper-item>
+    </swiper>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            current: "index",
+            showPageName: "",
+            indexLastPage: '',
+            cloudLastPage: '',
+            index: [{
+                name: "首页"
+            }, {
+                name: "活动"
+            }, {
+                name: "案例"
+            }, {
+                name: "视频"
+            }],
+            cloud: [{
+                name: "资料库"
+            }, {
+                name: "商学院"
+            }, {
+                name: "单品"
+            }, {
+                name: "首页"
+            }],
+            countDown: null,
+        }
+    },
+    props: {
+        onChange: {
+            type: Function
+        }
+    },
+    mounted() {
+        // #ifdef !MP-WEIXIN
+        this.onClick(this.$parent.$parent.swiperItemID, this.$parent.$parent.page)
+        // #endif
+    },
+    methods: {
+        onClick(current, name, update = false) {
+            const item = this[current].find(v => v.name == name)
+            if (typeof item.loading != 'boolean' || update) {
+                item.loading = true;
+                update = true;
+            }
+            this[current + 'LastPage'] = name;
+            this.current = current;
+            this.showPageName = name;
+
+            this.$emit("onChange", {
+                current, name, update, callBack: callBack.bind(this)
+            })
+            function callBack(loading = false) {
+                item.loading = loading;
+                this[current] = JSON.parse(JSON.stringify(this[current]));
+            }
+        },
+        update() {
+            if (this.countDown) {
+                this.onClick(this.current, this.showPageName, true)
+            } else {
+                this.countDown = setTimeout(() => {
+                    clearTimeout(this.countDown)
+                    this.countDown = null;
+                }, 300)
+            }
+        },
+    },
+}
+</script>
+
+<style lang="scss">
+.box {
+    position: fixed;
+    width: 355px;
+    height: 50px;
+    background: rgba(255, 255, 255, 0.95);
+    box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.16);
+    border-radius: 50px;
+    left: 10px;
+    bottom: 20px;
+
+    .swiper-item {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        width: 355px;
+        height: 50px;
+        padding: 0 30px;
+        box-sizing: border-box;
+
+        .item {
+            font-family: Source Han Sans SC, Source Han Sans SC;
+            font-size: 16px;
+            color: #666666;
+            padding: 10px;
+        }
+
+        .image {
+            width: 40px;
+            padding: 4px;
+        }
+    }
+
+}
+</style>

static/c+selected.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="40" height="20.001" viewBox="0 0 40 20.001"><defs><style>.a,.c{fill:#666;}.a{font-size:12px;font-family:SourceHanSansSC-Regular, Source Han Sans SC;}.b{font-size:14px;}</style></defs><g transform="translate(-298 -622.502)"><text class="a" transform="translate(309 638.503)"><tspan x="0" y="0">云</tspan><tspan class="b" y="0">C+</tspan></text><path class="c" d="M10.509,18H6.217a6.424,6.424,0,0,1-4.4-1.688,5.548,5.548,0,0,1-.621-7.538A6.21,6.21,0,0,1,4.144,6.686,7.6,7.6,0,0,1,6.89,1.945,8.738,8.738,0,0,1,12.433,0a8.827,8.827,0,0,1,4.53,1.248A7.923,7.923,0,0,1,20,4.443H18.362a6.969,6.969,0,0,0-5.929-3.158A6.61,6.61,0,0,0,5.526,7.714a4.576,4.576,0,0,0-4.144,4.5,4.74,4.74,0,0,0,4.835,4.5h4.292V18Z" transform="translate(298 622.502)"/></g></svg>