1.主要代码

list.wxml文件

　　采用import引入list-template.wxml，使用swiper实现轮播，indicator-dots用于显示面板指示点，indicator-active-color用于当前选中的指示点颜色。wx:for用于遍历。

<!--pages/list/list.wxml-->
<import src='/pages/template/list-template.wxml'/>
<view>
  <!-- 轮播图 -->
  <swiper catchtap="carouselToDetail" indicator-dots indicator-color="yellowgreen" indicator-active-color="pink">
    <swiper-item>
      <image data-id='1' src="/images/detail/carousel/01.jpg"></image>
    </swiper-item>
    <swiper-item>
      <image data-id='0' src="/images/detail/carousel/02.jpg"></image>
    </swiper-item>
    <swiper-item>
      <image data-id='2' src="/images/detail/carousel/03.jpg"></image>
    </swiper-item>
    <swiper-item>
      <image data-id='3' src="/images/detail/carousel/04.jpg"></image>
    </swiper-item>
  </swiper>
  <!-- 内容列表 -->
  <block wx:for='{{listArr}}' wx:key='{{item.id}}'>
    <view catchtap='toDetail' data-id='{{item.id}}'>
      <template is="listTmp" data='{{...item}}'/>
    </view>
  </block>
</view>

list.js文件

　　该文件主要使用了target（用于触发事件的元素），currentTarget（用于绑定事件的元素），注意两者的区别。同时引入数据不能使用绝对路径，只能使用相对路径

let datas = require('../../datas/list-data.js') //不能用绝对路径，只能用相对路径
Page({

  //页面的初始数据
  data: {
    listArr: []
  },

  //生命周期函数--监听页面加载
  onl oad: function (options) {
    this.setData({
      listArr: datas.list_data
    })
  },

  //点击跳转到detail详情页
  toDetail(event){
    console.log(event)
    let id = event.currentTarget.dataset.id; //获取点击跳转对应的下标
    wx.navigateTo({  //跳转到相应页面（保留当前页面） 而wx.redirectTo()是跳转后不保留当前页面
      url:'/pages/detail/detail?id='+id,
    })
  },
  //点击轮播图跳转
  carouselToDetail(event){
    let id = event.target.dataset.id;  //target和currentTarget的区别
    wx.navigateTo({  //跳转到相应页面（保留当前页面） 而wx.redirectTo()是跳转后不保留当前页面
      url:'/pages/detail/detail?id='+id,
    })
  }
})

list-template.wxml

　　定于i每一个列表项的模板，并将该文件引入到list.wxml中，同时将list-template.css引入到list.css中，只不过不同的引入方法。

list-template.wxml： <import src='/pages/template/list-template.wxml'/> list-template.css： @import '/pages/template/list-template.wxss';

<template name='listTmp'>
  <view class="tempContainer">
      <view class="avatar_date">
          <image src="{{avatar}}"></image>
          <text>{{date}}</text>
      </view>
      <text class='company'>{{title}}}</text>
      <image class='contentImg' src="{{detail_img}}"></image>
      <text class='content'>{{detail_content}}</text>
      <view class='collection_love'>
          <image src="/images/icon/star.png"></image>
          <text>{{love_count}}</text>
          <image src="/images/icon/view.png"></image>
          <text>{{attention_count}}</text>
      </view>
  </view>
</template>