devbox
IT小白
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

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

作者：IT小白 | 2024-07-20 23:52:29

赞

踩

hot-article

一、前言

        目前我们已经实现了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；然后把首页的相关结构负责过来即可；
        注：
                虽说我们可以从首页复制结构，但是明显代码存在大量的冗余；我们在之后会给大家讲解模版；
                大家目前不用太纠结里面的文本内容，因为后续我们会用真实数据覆盖；

  1. <!-- 文章列表区域 -->
  2. <view id="hotArticleView">
  3.   <view class="articleView">
  4.     <view>
  5.       <image src="/images/article01.png"></image>
  6.     </view>
  7.     <view class="articleContent">
  8.       <view class="articleTitle">
  9.         你活出自我的样子,真美
  10.       </view>
  11.       <view class="articleDesc">
  12.         千百年来,古人总是把人的品格与自然之物相联系起来,以花草树木之品性喻人的精神情操。
  13.       </view>
  14.     </view>
  15.   </view>
  16.  
  17.   <view class="articleView">
  18.     <view>
  19.       <image src="/images/article02.png"></image>
  20.     </view>
  21.     <view class="articleContent">
  22.       <view class="articleTitle">
  23.         你活出自我的样子,真美
  24.       </view>
  25.       <view class="articleDesc">
  26.         千百年来,古人总是把人的品格与自然之物相联系起来,以花草树木之品性喻人的精神情操。
  27.       </view>
  28.     </view>
  29.   </view>
  30.  
  31.   <view class="articleView">
  32.     <view>
  33.       <image src="/images/article03.png"></image>
  34.     </view>
  35.     <view class="articleContent">
  36.       <view class="articleTitle">
  37.         你活出自我的样子,真美
  38.       </view>
  39.       <view class="articleDesc">
  40.         千百年来,古人总是把人的品格与自然之物相联系起来,以花草树木之品性喻人的精神情操。
  41.       </view>
  42.     </view>
  43.   </view>
  44.  
  45.   <view class="articleView">
  46.     <view>
  47.       <image src="/images/article04.jpg"></image>
  48.     </view>
  49.     <view class="articleContent">
  50.       <view class="articleTitle">
  51.         你活出自我的样子,真美
  52.       </view>
  53.       <view class="articleDesc">
  54.         千百年来,古人总是把人的品格与自然之物相联系起来,以花草树木之品性喻人的精神情操。
  55.       </view>
  56.     </view>
  57.   </view>
  58.  
  59.   <view class="articleView">
  60.     <view>
  61.       <image src="/images/article05.jpg"></image>
  62.     </view>
  63.     <view class="articleContent">
  64.       <view class="articleTitle">
  65.         你活出自我的样子,真美
  66.       </view>
  67.       <view class="articleDesc">
  68.         千百年来,古人总是把人的品格与自然之物相联系起来,以花草树木之品性喻人的精神情操。
  69.       </view>
  70.     </view>
  71.   </view>
  72.  
  73.   <view class="articleView">
  74.     <view>
  75.       <image src="/images/article06.jpg"></image>
  76.     </view>
  77.     <view class="articleContent">
  78.       <view class="articleTitle">
  79.         你活出自我的样子,真美
  80.       </view>
  81.       <view class="articleDesc">
  82.         千百年来,古人总是把人的品格与自然之物相联系起来,以花草树木之品性喻人的精神情操。
  83.       </view>
  84.     </view>
  85.   </view>
  86. </view>

2.2 样式实现

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

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

  1. /* 文章列表区域*/
  2. #hotArticleView{
  3.   padding: 0 22rpx;
  4. }
  5.  
  6. .articleView {
  7.   display: flex;
  8.   padding: 30rpx 0;
  9.   border-bottom: 1rpx solid #F1F1F1;
  10. }
  11.  
  12. .articleView image{
  13.   width: 120rpx;
  14.   height: 120rpx;
  15.   margin-right: 20rpx;
  16. }
  17.  
  18. .articleTitle{
  19.   font-size: 28rpx;
  20.   font-weight: bold;
  21.   line-height: 50rpx;
  22. }
  23.  
  24. .articleDesc{
  25.   font-size: 26rpx;
  26.   color: #A9A9A9;
  27.   line-height: 35rpx;
  28. }

三、正在加载

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

四、页面跳转

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

4.1 组件跳转方式

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

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

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

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

属性类型默认值必填说明
targetstringself否在哪个目标上发生跳转，默认当前小程序
urlstring否当前小程序内的跳转链接
open-typestringnavigate否跳转方

 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

  1. <navigator id="moreView" url="/pages/hotArticle/hotArticle" open-type="navigate"> 
  2.     <text>查看更多</text>
  3.     <view class="arrow"></view>
  4. </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即可；

  1. <!-- 查看更多 -->
  2. <view id="moreView" bindtap="goHotArticlePage"> 
  3.     <text>查看更多</text>
  4.     <view class="arrow"></view>
  5. </view>
  1. goHotArticlePage(){
  2.     wx.navigateTo({
  3.         url: '/pages/hotArticle/hotArticle',
  4.     })
  5. },
声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：【wpsshop博客】
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号