自己搭建小程序商城

<!-- index.wxml -->
<view class="container">
  <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
    <swiper-item>
      <image src="path/to/image1.jpg" mode="aspectFill"></image>
    </swiper-item>
    <swiper-item>
      <image src="path/to/image2.jpg" mode="aspectFill"></image>
    </swiper-item>
  </swiper>
  <view class="product-list">
    <block wx:for="{{products}}" wx:key="id">
      <view class="product-item" bindtap="navigateToProductDetail" data-id="{{item.id}}">
        <image src="{{item.image}}" mode="aspectFit"></image>
        <text>{{item.name}}</text>
        <text>¥{{item.price}}</text>
      </view>
    </block>
  </view>
</view>

/* index.wxss */
.container {
  padding: 20px;
}
.swiper {
  height: 300px;
}
.product-item {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}
.product-item image {
  width: 100px;
  height: 100px;
  margin-right: 10px;
}

// index.js
Page({
  data: {
    indicatorDots: true,
    autoplay: true,
    interval: 5000,
    duration: 1000,
    products: [
      { id: 1, name: 'Product A', price: 100, image: 'path/to/image1.jpg' },
      { id: 2, name: 'Product B', price: 200, image: 'path/to/image2.jpg' },
      // 更多产品数据...
    ]
  },
  navigateToProductDetail(e) {
    const productId = e.currentTarget.dataset.id;
    wx.navigateTo({
      url: `/pages/productDetail/productDetail?id=${productId}`
    });
  }
});