markdown

miniprogram/pages/home/home.js

 // pages/home/home.js
+//获取应用实例
+const app = getApp();
 Page({
 
   /**
@@ -17,7 +19,12 @@ Page({
     interval: 5000,
     duration: 1000,
     menuIsShow:false,
-    bottomBtn:'front'
+    bottomBtn:'front',
+    titleObj:[],
+    baseUrl:'https://yongma16.xyz/api/',
+    path:'article/index/',
+    currentArticleId:0,
+    currentArticleTitle:''
   },
   // 监听
   watch:{
@@ -25,6 +32,53 @@ Page({
       console.log('监听',newVal,oldVal)
     }
   },
+  /**
+   * 获取文章
+   */
+  clickBlogTitleBtn(e){
+    const {id,title}=e.currentTarget.dataset
+    this.setData({
+      currentArticleId:id,
+      currentArticleTitle:title
+    })
+    this.getRemoteArticleById(id)
+  },
+  /**
+   * 获取文章
+   * @param {*} id 
+   */
+  getRemoteArticleById(id){
+    const blogComponent=this.selectComponent('#blog-id')
+    blogComponent.setLoading(true)
+    const baseUrl=this.data.baseUrl
+    const path=this.data.path
+    const headers = {'Content-Type':'application/json;charset=UTF-8'}
+    const params={
+      value:id
+    }
+    wx.request({
+      url: baseUrl+path,
+      headers:headers,
+      data:params,
+      method:'POST',
+      success: (res) => {
+        const data=res.data
+        const articleStr=data&&data.article[0]
+        blogComponent.setArticleNode(articleStr)
+      }
+    });
+  },
+  /**
+   * 更新菜单
+   * @param {Element} e 
+   */
+  updateArticleMenu(e){
+    console.log('info info',e.detail),
+    this.setData({
+      titleObj:e.detail
+    })
+  },
+
   // 自定义函数
   changeIndicatorDots() {
     this.setData({
@@ -65,18 +119,33 @@ Page({
   },
   // 导航的按钮
   clickBottomBtn(e){
-      const label=e.currentTarget.dataset.label||'front'
-      console.log('click',label)
+      const label=e.currentTarget.dataset.label||this.data.bottomBtn
+      if(label==='target'||label==='life'){
+        return
+      }
       this.setData({
         bottomBtn:label
       })
   },
 
+  getRemoteData(){
+    console.log('进入home页面' ,12431243)
+    let url='https://yongma16.xyz/api/'
+    let path='article/index/'
+    wx.request({
+      url: url+path,
+      method:'GET',
+			success: (res) => {
+        console.log('res2222',res)
+			}
+		});
+  },
+
   /**
    * 生命周期函数--监听页面加载
    */
   onLoad: function (options) {
-    console.log('进入home页面' ,12431243)
+    this.getRemoteData()
   },
 
   /**

miniprogram/pages/home/home.wxml

 <!--pages/home/home.wxml-->
 <view class="container">
-<view class="container-menu-expand" wx:if="{{!menuIsShow}}">
+<view class="container-menu-expand" wx:if="{{!menuIsShow&&bottomBtn==='blog'}}">
   <view class="arrow-left" bindtap="menuSwitch"></view>
 </view>
   <view class="container-menu-mask"  wx:if="{{menuIsShow}}"></view>
   <view class="container-menu" wx:if="{{menuIsShow}}">
   <view class="arrow-right" bindtap="menuSwitch"></view>
   <view class="btn-ul">
-    <text>这是菜单</text></view>
+    记忆碎片</view>
+    <block wx:for="{{titleObj}}" wx:key="*this">
+    <view class="blog-title {{currentArticleId===item.id? 'title-actived':''}}" bindtap="clickBlogTitleBtn" data-title="{{item.title}}" data-id="{{item.id}}">{{item.title}}</view>
+    </block>
   </view> 
   <view class="caontainer-header" wx:if="{{bottomBtn==='front'}}">
     <view class="swiper">
       <swiper indicator-dots="{{indicatorDots}}"
-        autoplay="{{ autoplay }}" interval="{{interval}}" duration="{{duration}}">
+        autoplay="{{ autoplay }}" interval="{{interval}}" duration="{{duration}}" class="swiper-design">
         <block wx:for="{{background}}" wx:key="*this">
           <swiper-item>
             <view class="swiper-item {{item.class}}">
@@ -25,17 +28,16 @@
   </view>
 
   <view class="container-content">
-    倒计时 {{content}}
     <home-content class='home-content-class' headerItem='{{content}}' wx:if="{{bottomBtn==='front'}}"></home-content>
-    <blog class='home-content-class' wx:if="{{bottomBtn==='blog'}}"></blog>
+    <blog class='home-content-class' id="blog-id" wx:if="{{bottomBtn==='blog'}}" bind:updateArticleMenu="updateArticleMenu"></blog>
     <future class='home-content-class' wx:if="{{bottomBtn==='target'}}"></future>
     <life class='home-content-class' wx:if="{{bottomBtn==='life'}}"></life>
   </view>
   <view class="container-footer">
     <view class="container-footer-btn-menu">
-    <view class="default-btn active {{bottomBtn==='front'? 'btn-actived':''}}" bindtap="clickBottomBtn" data-label='front'>前端</view>
+    <view class="default-btn active {{bottomBtn==='front'? 'btn-actived':''}}" bindtap="clickBottomBtn" data-label='front'>主页</view>
     <view class="default-btn active {{bottomBtn==='blog'? 'btn-actived':''}}" bindtap="clickBottomBtn" data-label='blog'>博客</view>
-    <view class="default-btn active {{bottomBtn==='target'? 'btn-actived':''}}" bindtap="clickBottomBtn" data-label='target'>方向</view>
+    <view class="default-btn active {{bottomBtn==='target'? 'btn-actived':''}}" bindtap="clickBottomBtn" data-label='target'>未来</view>
     <view class="default-btn active {{bottomBtn==='life'? 'btn-actived':''}}" bindtap="clickBottomBtn" data-label='life'>生活</view>
     </view>
   </view>

miniprogram/pages/home/home.wxss

@@ -8,10 +8,11 @@ page {
 }
 .container{
   position: relative;
-  width: 100%;
-  height:100%;
-  background: rgb(255, 255, 255);
+  width: 100vw;
+  height:100vh;
+  background: #1c92d2;
 }
+
 /* 箭头 //上右边下左 */
 .arrow-left{
   width: 0;
@@ -19,6 +20,7 @@ page {
   border: 20px solid;
   border-color: transparent transparent  transparent rgb(255,255,255);
   position: relative;
+  opacity: .8;
   cursor: pointer;
 }
 .arrow-left::after{
@@ -27,6 +29,7 @@ page {
   top: -20px;
   left: -23px;
   border: 20px solid;
+  opacity: .8;
   border-color:  transparent transparent transparent rgb(0, 183, 255);
 }
 
@@ -37,6 +40,7 @@ page {
   border: 20px solid;
   border-color: transparent rgb(255,255,255)  transparent transparent;
   position: relative;
+  opacity: .8;
   cursor: pointer;
 }
 .arrow-right::after{
@@ -45,6 +49,7 @@ page {
   top: -20px;
   right: -23px;
   border: 20px solid;
+  opacity: .8;
   border-color:  transparent  rgb(0, 183, 255) transparent transparent;
 }
 /* 左侧的菜单 */
@@ -63,6 +68,17 @@ page {
   margin-top:40px;
   margin-left:10px;
 }
+.blog-title {
+  margin-left:10px;
+  margin-top:5px;
+}
+.blog-title:hover{
+  cursor: pointer;
+  color:#1c92d2;
+}
+.title-actived{
+  color:#1c92d2 !important;
+}
 /* mask */
 .container-menu-mask{
   position: absolute;
@@ -85,6 +101,9 @@ page {
   height:150px;
   display: flex;
 }
+/* .swiper-design:active,.swiper:active{
+  background-color: #ffffff !important;
+} */
 /* 嵌入表头图案 */
 .swiper{
   position: relative;
@@ -100,13 +119,13 @@ page {
   height: 100%;
 }
 .header-swiper-one{
-  background-color: rgba(158, 209, 238,.4);
+  background-color: rgba(0, 183, 255,.8);
 }
 .header-swiper-two{
-  background-color: rgba(158, 209, 238,.5);
+  background-color: rgba(0, 183, 255,.9);
 }
 .header-swiper-three{
-  background-color: rgba(158, 209, 238, 0.6);
+  background-color:rgba(0, 183, 255,1);
 }
 
 .caontainer-header content-title{
@@ -135,18 +154,82 @@ page {
   display: flex;
   flex-wrap: nowrap;
   width:100vw;
+  background-color: white;
+  /* border:1px solid rgb(255, 136, 0); */
   bottom:0;
 }
 .default-btn{
   position: relative;
   width:25%;
-  border:1px solid antiquewhite;
+  font-size: 1em;
+  color: #000000;
+  border:1px dotted transparent;
+  /* border-right:1px solid rgb(255, 136, 0); */
   text-align: center;
-  height:100%;
+  height:60px;
+  line-height: 60px;
 }
 .default-btn:active{
-  background-color:  rgb(8, 113, 252);
+  background-color:rgb(8, 183, 252);
+  color:#ffffff;
 }
 .btn-actived{
-  background-color:  rgb(8, 113, 252);
+  color:#ffffff;
+  background-color:  rgb(8, 183, 252);
+  border:1px solid  rgb(8, 183, 252);
+  box-shadow: 0 5px 5px 5px rgba(8, 183, 252,.5);
+}
+
+/* loading */
+
+.loader-child {
+  position: absolute;
+  width: 100px;
+  height: 100px;
+  box-sizing: border-box;
+  border-radius: 50%;
+}
+.loader-child:nth-of-type(1) {
+  left: 0%;
+  top: 0%;
+  animation: rotate-one 1.15s linear infinite;
+  border-bottom: 3px solid #1c92d2;
+}
+.loader-child:nth-of-type(2) {
+  right: 0%;
+  top: 0%;
+  animation: rotate-two 1.15s linear infinite;
+  border-right: 3px solid #1c92d2;
+}
+.loader-child:nth-of-type(3) {
+  right: 0%;
+  bottom: 0%;
+  animation: rotate-three 1.15s linear infinite;
+  border-top: 3px solid #1c92d2;
+}
+@keyframes rotate-one {
+  0% {
+    transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
+  }
+  100% {
+    transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
+  }
+}
+
+@keyframes rotate-two {
+  0% {
+    transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
+  }
+  100% {
+    transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
+  }
+}
+
+@keyframes rotate-three {
+  0% {
+    transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
+  }
+  100% {
+    transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
+  }
 }
\ No newline at end of file