方便提供代码片段吗

引用组件的页面 .wxml
<nav-bar navbar-data='{{nvabarData}}'></nav-bar>
<view class="content">
 <!-- <view style="width: 100%; height: 100rpx;"></view> -->
 <view class="item" wx:for="{{newsList}}" wx:key="id" data-id='{{item.id}}' catchtap="synthesizeUrl">
  <!-- 图标 -->
  <view class="left-img">
   <image src="{{item.imgUrl}}"></image>
  </view>
  <!-- 内容 -->
  <view class="right-content">
   <!-- 上边部分 -->
   <view class="right-top">
    <text class="bigTitle">{{item.title}}</text>
    <text class="time">{{item.time}}</text>
   </view>
   <!-- 下边 -->
   <view class="right-bottom">
    <text class="small">{{item.titleMini}}</text>
    <text class="number">{{item.number}}</text>
   </view>
  </view>
 </view>
</view>

引用页面 .js
// pages/news/news.js
const app = getApp()
Page({
  /**
   * 页面的初始数据
   */
  data: {
    // 顶部（开始）
    // 组件所需的参数
    nvabarData: {
      showCapsule: 1, //是否显示左上角图标 1表示显示 0表示不显示
      title: '消息中心', //导航栏 中间的标题
    },
    // 此页面 页面内容距最顶部的距离
    height: app.globalData.height * 2 + 20,
    // 顶部（结束）
    newsList: [
      {
        id: 0,
        imgUrl: '../../image/flow.png',
        title: '流程审批',
        time: '10:22',
        titleMini: '你有8条待处理的流程，点击处理',
        number: 3
      },
      // {
      // id: 1,
      // imgUrl: '../../image/project.png',
      // title: '项目工作',
      // time: '10:22',
      // titleMini: '你有8条待处理的流程，点击处理有8条待处理的流程，点击处理',
      // number: 3
      // },
      {
        id: 2,
        imgUrl: '../../image/inform.png',
        title: '警告通知',
        time: '10:22',
        titleMini: '你有8条待处理的流程，点击处理',
        number: '99+'
      },
      {
        id: 3,
        imgUrl: '../../image/read.png',
        title: '会议通知',
        time: '10:22',
        titleMini: '你有8条待处理的流程，点击处理',
        number: 34
      }
    ]
  },
  // 跳转到相应页面
  synthesizeUrl: function (event) {
    // event.currentTarget.dataset.id
    let id = event.currentTarget.dataset.id
    if (id === 0) {
      wx.navigateTo({
        url: `/pages/flowPath/flowPath?id=${event.currentTarget.dataset.id}`
      });
    } else if (id === 2) {
      wx.navigateTo({
        url: `/pages/warning/warning?id=${event.currentTarget.dataset.id}`
      });
    } else if (id === 3) {
      wx.navigateTo({
        url: `/pages/conference/conference?id=${event.currentTarget.dataset.id}`
      });
    } else {
      console.log('页面不存在！（404）')
    }
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    console.log(this.data.height)
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
  },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
  },
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
  },
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
  },
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
  },
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
  },
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
  }
})

组件部分也要吗？