演示的项目结构大致是这样的

先是子级页面list的代码

wxml

    <view class="package-item">
      <block wx:if="{{tabIdx == 1}}">
        <view class="package-list" wx:for="{{packageList}}" data-item="{{item}}" wx:key="id" bindtap="onItemClick">
          <image src="{{item.thumb}}" mode="aspectFill" class="package-img" />
          <view class="package-list-footer">
            <view class="package-name">{{item.name}}</view>
            <view class="package-time">更新时间:{{item.updateTime}}</view>
          </view>
        </view>       
      </block>
      <block wx:if="{{tabIdx == 2}}">尚在开发，敬请期待</block>
    </view>

list.json里我没有调用东西

{
  "usingComponents": {}
}

list.js

const app = getApp()
const util = require('../../utils/util.js');//这是请求方式的js用你自己的即可
const api = require('../../config/api.js');//这是api的统一存放处

Component({ //注意这里不是page
  properties: { //这里是必须的
    packageList: {
      type: Array,
      value: []
    }
  },
  data: {
    tabIdx: '1',
  },
  lifetimes: {
    attached() {
      this.getPackageList();//组件里不用onLoad onShow
    }
  },
  methods: {
    getPackageList(){
      //获取学校id
      const userInfo = wx.getStorageSync('userInfo');
      let sid = userInfo.schoolId
      util.request(api.packageList, {//这里是请求接口 重要的是拿到packageList的值 其它的不重要
          sid: sid
        }, 'POST').then(res => {  
        if(res.code = 200) {
          let params = res.rows.map(function(item){//过滤数据也不重要
            let updateTime = item.updateTime.split(" ")[0].replace(/-/g, ".")//这里是对时间的处理不重要
            return {
              background: item.background,
              coursewareNum: item.coursewareNum,
              grade: item.grade,
              id: item.id,
              name: item.name,
              sort: item.sort,
              thumb: item.thumb,
              type: item.type,
              updateTime: updateTime
            }
          })
          this.setData({
            packageList: params
          })
        } else {
          wx.showModal({
            title: res.msg,
            icon: 'error',
            showCancel: false,
            duration: 3000
          });        
        }
      });   
    },
    
    onItemClick(event) {//重点之 把子级的数据传到父级
      const selectedItem = event.currentTarget.dataset.item;
      this.triggerEvent('select-item', selectedItem);
    },
  }  
})

list.wxss页面的样式 写好就可以在各个父级页面调用了

这里开始是父级页面 activity.wxml

<list list-data="{{packageList}}" bind:select-item="onSelectItem"></list>

重点之 引入list组件

{
  "usingComponents": {
    "list": "/common/list/list"
  },
  "navigationBarTitleText": "活动"
}

重点之 activity.js

Page({
  data: {
    packageList: []
  },
  onLoad(options) {},
  onShow(){},
  onSelectItem(event) {
    const selectedItem = event.detail;
    console.log(selectedItem)
    // 将选中的项传递给detail页面
    // wx.navigateTo({
    //   url: '/pages/detail/detail?selectedItem=' + selectedItem
    // });
  }
})