navigator導航頁面跳轉與綁定事件

效果圖：

1. 新建一個index頁面

主頁面分為兩塊，上面是導航條，下面是輪播圖。

導航條：

  <view class='menu'>
    <scroll-view scroll-x>
      <view class='scroll-nav'>
        <navigator url="/pages/baidupage/baidupage" data-navindex='0' bindtap="navNews" class="{{currentTab!=0?'color-black': 'color-green'}}">社會新聞</navigator>
        <navigator url="" data-navindex='1' bindtap="navNews" class="{{currentTab!=1?'color-black': 'color-green'}}">國際新聞</navigator>
        <navigator url="" data-navindex='2' bindtap="navNews">國內新聞</navigator>
        <navigator url="" data-navindex='3' bindtap="navNews">娛樂新聞</navigator>
        <navigator url="" data-navindex='4' bindtap="navNews">體育新聞</navigator>
        <navigator url="" data-navindex='5' bindtap="navNews">綜合新聞</navigator>
      </view>
    </scroll-view>
  </view>

 

scroll-x表示可以橫向滾動，導航條內容較長，因此需要橫向滾動。

navigator是導航條，

url里面是跳轉鏈接，這個鏈接頁面必須在app.json里面存在。當點擊這個導航時會跳轉到baidupage的頁面，這個頁面里面的內容是打開https://wap.baidu.com，一般小程序是沒有權限打開百度頁面的，這里是模擬，所以關閉了驗證，具體原因參考https://blog.csdn.net/qq_32113629/article/details/79483213

bindtap是綁定事件，當點擊這個導航時會觸發navNews函數，這個函數在Index.js中定義的。

class里面是導航的顏色顯示，當在當前tab下面時，字體是綠色，當切換到其他導航時，顏色變為黑色。

 

輪播圖：

  <view>
    <swiper current="{{currentTab}}" bindchange="swiperView">
      <swiper-item>
        <view class="swiper-view1">社會新聞</view>
      </swiper-item>
      <swiper-item>
        <view class="swiper-view2">國際新聞</view>
      </swiper-item>
    </swiper>
  </view>

 

社會新聞的頁面是swiper-view1，為紅色。國際新聞的頁面是swiper-view2，為綠色，其中currentTab這個變量就是個關鍵，將導航條和輪播圖聯系起來。

 

總的代碼：

app.json

{
  "pages": [
    "pages/index/index",
    "pages/baidupage/baidupage"
  ],
  "window": {
    "backgroundColor": "#F6F6F6",
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#F00",
    "navigationBarTitleText": "今日頭條",
    "navigationBarTextStyle": "white"
  },
  "sitemapLocation": "sitemap97.json"
}

 

app.js

//app.js
App({
  onLaunch: function () {
    
    if (!wx.cloud) {
      console.error('請使用 2.2.3 或以上的基礎庫以使用雲能力')
    } else {
      wx.cloud.init({
        // env 參數說明：
        //   env 參數決定接下來小程序發起的雲開發調用（wx.cloud.xxx）會默認請求到哪個雲環境的資源
        //   此處請填入環境 ID, 環境 ID 可打開雲控制台查看
        //   如不填則使用默認環境（第一個創建的環境）
        // env: 'my-env-id',
        traceUser: true,
      })
    }

    this.globalData = {}
  }
})

 

app.wxss

/**app.wxss**/
.container {
  height: 100%;
  box-sizing: border-box;
} 


page {
  height: 100%;
}

 

 

index.js

// miniprogram/pages/index/index.js
Page({

  /**
   * Page initial data
   */
  data: {
    currentTab:0
  },

  //swiper切換操作
  swiperView:function(event){
    // console.log(event)
    var currentIndex = event.detail.current
    this.setData({
      currentTab: currentIndex
    })
  },

  // 新聞點擊操作
  navNews:function(event){
    // console.log(event)
    // console.log(event.currentTarget.dataset.navindex)
    var navIndex = event.currentTarget.dataset.navindex
    // 需要修改currentTab變量
    this.setData({
      currentTab:navIndex
    })
  },

  /**
   * Lifecycle function--Called when page load
   */
  onLoad: function (options) {

  },

  /**
   * Lifecycle function--Called when page is initially rendered
   */
  onReady: function () {

  },

  /**
   * Lifecycle function--Called when page show
   */
  onShow: function () {

  },

  /**
   * Lifecycle function--Called when page hide
   */
  onHide: function () {

  },

  /**
   * Lifecycle function--Called when page unload
   */
  onUnload: function () {

  },

  /**
   * Page event handler function--Called when user drop down
   */
  onPullDownRefresh: function () {

  },

  /**
   * Called when page reach bottom
   */
  onReachBottom: function () {

  },

  /**
   * Called when user click on the top right corner to share
   */
  onShareAppMessage: function () {

  }
})

 

index.json

{
  "usingComponents": {}
}

 

index.wxml

<!--miniprogram/pages/index/index.wxml-->
<view class="container">
  <view class='menu'>
    <scroll-view scroll-x>
      <view class='scroll-nav'>
        <navigator url="/pages/baidupage/baidupage" data-navindex='0' bindtap="navNews" class="{{currentTab!=0?'color-black': 'color-green'}}">社會新聞</navigator>
        <navigator url="" data-navindex='1' bindtap="navNews" class="{{currentTab!=1?'color-black': 'color-green'}}">國際新聞</navigator>
        <navigator url="" data-navindex='2' bindtap="navNews">國內新聞</navigator>
        <navigator url="" data-navindex='3' bindtap="navNews">娛樂新聞</navigator>
        <navigator url="" data-navindex='4' bindtap="navNews">體育新聞</navigator>
        <navigator url="" data-navindex='5' bindtap="navNews">綜合新聞</navigator>
      </view>
    </scroll-view>
  </view>

  <view>
    <swiper current="{{currentTab}}" bindchange="swiperView">
      <swiper-item>
        <view class="swiper-view1">社會新聞</view>
      </swiper-item>
      <swiper-item>
        <view class="swiper-view2">國際新聞</view>
      </swiper-item>
    </swiper>
  </view>
</view>

 

index.wxss

/* miniprogram/pages/index/index.wxss */
.menu{
  background-color: lightcyan;
}

.scroll-nav{
  background-color: lightcyan;
  display: flex;
  white-space: nowrap;
  font-size: 30rpx;
  height: 60rpx;
  line-height: 60rpx;
}

.scroll-nav navigator{
  font-weight: bold;
  margin: 0 10rpx;
}

.swiper-view1{
  width: 100%;
  height: 400rpx;
  background-color: red;
}

.swiper-view2{
  width: 100%;
  height: 400rpx;
  background-color: green;
}

.color-black{
  color: black;
}

.color-green{
  color: green;
}

 

 

baidupage.wxml

<!--miniprogram/pages/baidupage/baidupage.wxml-->
<web-view src="https://wap.baidu.com/"></web-view>

 

 

OK.