⼩程序（第⼗七章）-精选⽂章页⾯实现
⼩程序（第⼗七章）- 精选⽂章页⾯实现写文章的小程序
前⾔
之前实现了三个页⾯，通过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',
})
},

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。