用戶
 找回密碼
 立即注冊

QQ登錄

只需一步,快速開始

掃一掃,登錄網站

小程序社區 首頁 教程 查看內容

湖人vs山猫:小程序頂部導航欄,可滑動,可動態選中放大效果

湖人vs爵士季后赛 www.nbgeh.club Rolan 2019-11-25 00:36

最近在研究小程序頂部導航欄時,學到了一個不錯的導航欄,今天就來分享給大家。

老規矩,先看效果圖

可以看到我們實現了如下功能

1,頂部導航欄 
2,可以左右滑動的導航欄 
3,選中條目放大 
原理其實很簡單,我這里把我研究后的源碼發給大家吧。

wxml文件如下

  1. <!-- 導航欄 -->
  2. <scroll-view scroll-x class="navbar" scroll-with-animation scroll-left="{{scrollLeft}}rpx">
  3. <view class="nav-item" wx:for="{{tabs}}" wx:key="id" bindtap="tabSelect" data-id="{{index}}">
  4. <view class="nav-text {{index==tabCur?'tab-on':''}}">{{item.name}}</view>
  5. </view>
  6. </scroll-view>

wxss文件如下

  1. /* 導航欄布局相關 */
  2. .navbar {
  3. width: 100%;
  4. height: 90rpx;
  5. /* 文本不換行 */
  6. white-space: nowrap;
  7. display: flex;
  8. box-sizing: border-box;
  9. border-bottom: 1rpx solid #eee;
  10. background: #fff;
  11. align-items: center;
  12. /* 固定在頂部 */
  13. position: fixed;
  14. left: 0rpx;
  15. top: 0rpx;
  16. }
  17. .nav-item {
  18. padding-left: 25rpx;
  19. padding-right: 25rpx;
  20. height: 100%;
  21. display: inline-block;
  22. /* 普通文字大小 */
  23. font-size: 28rpx;
  24. }
  25. .nav-text {
  26. width: 100%;
  27. height: 100%;
  28. display: flex;
  29. align-items: center;
  30. justify-content: center;
  31. letter-spacing: 4rpx;
  32. box-sizing: border-box;
  33. }
  34. .tab-on {
  35. color: #fbbd08;
  36. /* 選中放大 */
  37. font-size: 38rpx !important;
  38. font-weight: 600;
  39. border-bottom: 4rpx solid #fbbd08 !important;
  40. }

js文件如下

  1. // pages/test2/test2.js
  2. Page({
  3. data: {
  4. tabCur: 0, //默認選中
  5. tabs: [{
  6. name: '等待支付',
  7. id: 0
  8. },
  9. {
  10. name: '待發貨',
  11. id: 1
  12. },
  13. {
  14. name: '待收貨',
  15. id: 2
  16. },
  17. {
  18. name: '待簽字',
  19. id: 3
  20. },
  21. {
  22. name: '待評價',
  23. id: 4
  24. },
  25. {
  26. name: '五星好評',
  27. id: 5
  28. },
  29. {
  30. name: '差評訂單',
  31. id: 6
  32. },
  33. {
  34. name: '編程小石頭',
  35. id: 8
  36. },
  37. {
  38. name: '小石頭',
  39. id: 9
  40. }
  41. ]
  42. },
  43. //選擇條目
  44. tabSelect(e) {
  45. this.setData({
  46. tabCur: e.currentTarget.dataset.id,
  47. scrollLeft: (e.currentTarget.dataset.id - 2) * 200
  48. })
  49. }
  50. })

代碼里注釋很明白了,大家自己跟著多敲幾遍就可以了。后面會更新更多湖人vs爵士季后赛相關的知識,請持續關注。

分享至 : QQ空間
收藏
原作者: 編程小石頭 來自: 簡書
吉林快3开奖走势图一定牛 捕鱼世界唯一官网首页 阿理彩票苹果 辽宁gtv网络棋牌频道 福彩快乐12开奖结果 美人捕鱼棋牌 福彩3d黄金三路选号 组选奖号060 奇迹娱乐安卓 真钱捕鱼 晓游棋牌ios 公司赚钱后怎么提出来 福利彩票投注站9 广西11选5走势图 查询 青海快3图片 上海快3最新开奖号