07_心理咨询_微信小程序项目实战_精选文章页面静态效果实现

一、前言

        目前我们已经实现了4张页面，分别是首页、咨询页面、课程页面、我的页面；这四张页面，我们都可以通过tabBar来实现跳转，这四个页面也就是我们所说的tabBar页面；
    
        对于非tabBar页面，怎么跳转呢？比如：我们现在要写的精选文章页面，是点击首页精选文章区域的查看更多跳转过来的；怎么实现跳转，这是我们这一节要讨论的重点；

        精选文章页面对大家来说，已经没有什么难度了；

二、文章列表

2.1 页面结构

          1、在app.json的pages配置里面定义pages/hotArticle/hotArticle；

        2、为hotArticle页面添加编译模式，否则无法查看效果；

        3、定义一个view，给其添加id：hotArticleView；

        4、给hotArticleView里面添加6个子view，结构和首页的精选文章类似；给6个ziview添加class：articleView；然后把首页的相关结构负责过来即可；
        注：
                虽说我们可以从首页复制结构，但是明显代码存在大量的冗余；我们在之后会给大家讲解模版；
                大家目前不用太纠结里面的文本内容，因为后续我们会用真实数据覆盖；

<!-- 文章列表区域 -->
<view id="hotArticleView">
  <view class="articleView">
    <view>
      <image src="/images/article01.png"></image>
    </view>
    <view class="articleContent">
      <view class="articleTitle">
        你活出自我的样子,真美
      </view>
      <view class="articleDesc">
        千百年来,古人总是把人的品格与自然之物相联系起来,以花草树木之品性喻人的精神情操。
      </view>
    </view>
  </view>

  <view class="articleView">
    <view>
      <image src="/images/article02.png"></image>
    </view>
    <view class="articleContent">
      <view class="articleTitle">
        你活出自我的样子,真美
      </view>
      <view class="articleDesc">
        千百年来,古人总是把人的品格与自然之物相联系起来,以花草树木之品性喻人的精神情操。
      </view>
    </view>
  </view>

  <view class="articleView">
    <view>
      <image src="/images/article03.png"></image>
    </view>
    <view class="articleContent">
      <view class="articleTitle">
        你活出自我的样子,真美
      </view>
      <view class="articleDesc">
        千百年来,古人总是把人的品格与自然之物相联系起来,以花草树木之品性喻人的精神情操。
      </view>
    </view>
  </view>

  <view class="articleView">
    <view>
      <image src="/images/article04.jpg"></image>
    </view>
    <view class="articleContent">
      <view class="articleTitle">
        你活出自我的样子,真美
      </view>
      <view class="articleDesc">
        千百年来,古人总是把人的品格与自然之物相联系起来,以花草树木之品性喻人的精神情操。
      </view>
    </view>
  </view>

  <view class="articleView">
    <view>
      <image src="/images/article05.jpg"></image>
    </view>
    <view class="articleContent">
      <view class="articleTitle">
        你活出自我的样子,真美
      </view>
      <view class="articleDesc">
        千百年来,古人总是把人的品格与自然之物相联系起来,以花草树木之品性喻人的精神情操。
      </view>
    </view>
  </view>

  <view class="articleView">
    <view>
      <image src="/images/article06.jpg"></image>
    </view>
    <view class="articleContent">
      <view class="articleTitle">
        你活出自我的样子,真美
      </view>
      <view class="articleDesc">
        千百年来,古人总是把人的品格与自然之物相联系起来,以花草树木之品性喻人的精神情操。
      </view>
    </view>
  </view>
</view>

2.2 样式实现

        1、给hotArticleView设置左右内边距；

        2、从index.css赋值articleView及其子元素的相关样式；

/* 文章列表区域*/
#hotArticleView{
  padding: 0 22rpx;
}

.articleView {
  display: flex;
  padding: 30rpx 0;
  border-bottom: 1rpx solid #F1F1F1;
}

.articleView image{
  width: 120rpx;
  height: 120rpx;
  margin-right: 20rpx;
}

.articleTitle{
  font-size: 28rpx;
  font-weight: bold;
  line-height: 50rpx;
}

.articleDesc{
  font-size: 26rpx;
  color: #A9A9A9;
  line-height: 35rpx;
}

三、正在加载

        和咨询预约页面的类似，复制相应的代码即可；

四、页面跳转

        当我们点击首页-精彩文章-查看更多的时候，跳转到精选文章页面；

4.1 组件跳转方式

        组件跳转方式，类似于html中的超链接；

        组件方式依赖于navigator组件，navigator组件就是页面链接。
    
        组件文档：https://developers.weixin.qq.com/miniprogram/dev/component/navigator.html

        该组件有很多数据，但是我们只需要使用常用的几个即可，其他的大家自行查阅文档；

        当我们点击页面的每个区域，来实现跳转的话，一般都使用组件跳转；

属性	类型	默认值	必填	说明
target	string	self	否	在哪个目标上发生跳转，默认当前小程序
url	string		否	当前小程序内的跳转链接
open-type	string	navigate	否	跳转方

 target 的合法值

值	说明
self	当前小程序
miniProgram	其它小程序

open-type 的合法值

值	说明
navigate	对应 wx.navigateTo 或 wx.navigateToMiniProgram 的功能，保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。
redirect	对应 wx.redirectTo 的功能，关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。
switchTab	对应 wx.switchTab 的功能，跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
reLaunch	对应 wx.reLaunch 的功能
navigateBack	对应 wx.navigateBack 的功能
exit	退出小程序，target="miniProgram"时生效

        点击查看更多，跳转到精选文章页面，那么我们使用哪一种？第一种；

        1、把首页的查看更多的view，改为navigator组件；
    
        2、给navigator组件添加url属性，open-type属性；
                url: 精选文章的页面地址
                open-type：navigate

<navigator id="moreView" url="/pages/hotArticle/hotArticle" open-type="navigate"> 
    <text>查看更多</text>
    <view class="arrow"></view>
</navigator>

4.2 API跳转方式

        API跳转方式，类似于JS实现页面跳转；

        API跳转是需要结合事件，并且结合JS来实现；
    
        如果需要结合数据或逻辑来实现跳转的话，一般使用API跳转方式；比如登录成功跳转到我的页面；

        1、给查看更多view添加tap事件：手指触摸后马上离开；事件需要对应一个函数，当我们点击这个查看更多的时候，去执行函数里面的代码；

        2、在index.js里面添加goHotArticlePage函数，
                把index.js里面的bindViewTap、getUserProfile、getUserInfo函数都删除掉；把onload里面的代码也删除，但是onload留着；
        
        3、在goHotArticlePage函数里面写页面跳转的API即可；

<!-- 查看更多 -->
<view id="moreView" bindtap="goHotArticlePage"> 
    <text>查看更多</text>
    <view class="arrow"></view>
</view>

goHotArticlePage(){
    wx.navigateTo({
        url: '/pages/hotArticle/hotArticle',
    })
},