微信小程序（第十七章）- 精选文章页面实现

前言

之前实现了三个页面，通过tabBar实现页面间的跳转，现在实现的精选文章没有tabBar，那应该通过什么方式进行跳转？这是本章节的重点

精选文章页面实现

文章列表

页面结构实现

1. 在app.json的pages配置里面定义pages/hotArticle/hotArticle;
2. 为hotArticle页面添加编译设置，否则无法查看效果；
3. 定义1个view，给其添加id:hotArticleView;
4. 给hotArticleView里面添加几个子view，结构和文章首页精选文章类似，给子view添加class:articleView;
   注：在复制前几次写的代码时，会出现冗余，之后会讲解模板;

代码如下：

<!--文章列表区域-->
<view id="hotArticleView">
    <!--文章列表-->
    <view class="articleView">
        <view>
            <image src="/images/xsdkq_hotArticleView_jxwz1.png"></image>
        </view>
        <view class="articleContent">
            <view class="articleTitle">
                开发成就
            </view>
            <view class="articleDesc">
                小程序对开发者的影响介绍。
            </view>
        </view>
    </view>
    <!--文章列表-->
    <view class="articleView">
        <view>
            <image src="/images/xsdkq_hotArticleView_jxwz2.png"></image>
        </view>
        <view class="articleContent">
            <view class="articleTitle">
                版本使用1.0.0
            </view>
            <view class="articleDesc">
                版本原版。
            </view>
        </view>
    </view>
</view>

页面样式实现

1. 给hotArticleView设置左右内边距；
2. 从index.wxss复制articleView及其子元素相关位置;

代码如下：

/*文章列表区域*/
#hotArticleView{
    padding:0 22rpx;
}
#hotArticleTitleView{
    height:88rpx;
    font-size:30rpx;
    font-weight: bold;
    border-bottom: 1rpx solid #f1f1f1;
    line-height: 88rpx;
  }
  .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;
  }

正在加载实现

结构和信息查询页面相似，复制相关代码即可；

页面结构实现

<!--正在加载-->
<view id="loadingView">
    <image src="/images/xsdkq_information_query_zzjz.gif"></image>
    <text>正在加载更多数据</text>
</view>

页面样式实现

/*正在加载样式*/
#loadingView{
    text-align: center;
    height: 88rpx;
    background: #f0eff5;
    line-height: 88rpx;
}
#loadingView > image{
    width:48rpx;
    height:48rpx;
    vertical-align: middle;
}
#loadingView > text{
    font-size: 28rpx;
    vertical-align: middle;
}

页面跳转实现

组件跳转

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跳转

1. 给查看更多的view添加tab事件，tab事件：手指触摸后马上离开,tab事件类似于鼠标单击事件;事件需要对应一个函数，当我们点击查看更多时，去执行函数里面的代码；
2. 在index.js里面添加goHotArticlePage函数；
3. 在goHotArticlePage函数里面写页面跳转的API即可;

代码如下：

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

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