[移动开发]07_从零构建微信小程序项目_精选文章页面静态效果实现

?课程目录：

01_从零构建微信小程序项目_项目概述

02_从零构建微信小程序项目_项目环境搭建

03_从零构建微信小程序项目_首页静态效果实现

04_从零构建微信小程序项目_咨询页面静态效果实现

05_从零构建微信小程序项目_课程页面静态效果实现

06_从零构建微信小程序项目_我的页面静态效果实现

07_从零构建微信小程序项目_精选文章页面静态效果实现

持续更新中...

页面效果展示

一、前言

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

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

二、文章列表

?页面结构

??????????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>

样式实现

????????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;
}

三、正在加载

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

四、页面跳转

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

组件跳转方式

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

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

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

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

?target 的合法值

open-type 的合法值

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

????????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>

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',
    })
},