前言
之前实现了三个页面,通过tabBar实现页面间的跳转,现在实现的精选文章没有tabBar,那应该通过什么方式进行跳转?这是本章节的重点
精选文章页面实现
文章列表
页面结构实现
- 在app.json的pages配置里面定义pages/hotArticle/hotArticle;
- 为hotArticle页面添加编译设置,否则无法查看效果;
- 定义1个view,给其添加id:hotArticleView;
- 给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>
页面样式实现
- 给hotArticleView设置左右内边距;
- 从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;
}
页面跳转实现
组件跳转
- 把首页的查看更多的view,改为navigator组件;
- 给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跳转
- 给查看更多的view添加tab事件,tab事件:手指触摸后马上离开,tab事件类似于鼠标单击事件;事件需要对应一个函数,当我们点击查看更多时,去执行函数里面的代码;
- 在index.js里面添加goHotArticlePage函数;
- 在goHotArticlePage函数里面写页面跳转的API即可;
代码如下:
<!--查看更多-->
<view id="moreView" bindtap="goHotArticlePage">
<text>查看更多</text>
<view class="arrow"></view>
</view>
goHotArticlePage(){
wx.navigateTo({
url: '/pages/hotArticle/hotArticle',
})
},