微信小程序开发左侧固定，右侧swiper海报轮播

微信小程序开发中，如果想要实现左侧内容区域固定不动，右侧是一个轮播图（Swiper海报轮播），通常可以采用以下步骤：

1. **布局设计**：
- 使用`<view>`等基础组件创建两个Flexbox容器，分别设置左侧和右侧的样式。左边的容器设置`flex-direction: column`使其垂直排列，宽度固定；右边的容器设置`flex-direction: row`让内容水平滑动。

<view class="container left">
  <!-- 左侧固定内容 -->
</view>
<view class="container right">
  <swiper class="swiper">
    <!-- 幻灯片列表 -->
  </swiper>
</view>

2. **CSS样式**：
- `.left` 类设置左侧容器的样式，如`width: 200px; position: fixed;` 确保其固定在页面左側。
- `.right` 类设置右侧容器的样式，比如初始宽度为`calc(100% - 200px)`，并添加滚动效果。

.container.left {
  width: 200px;
  position: fixed;
  /* 其他样式 */
}

.container.right {
  width: calc(100% - 200px);
  overflow-x: auto;
  display: flex;
  justify-content: space-between;
}
.swiper {
  // Swiper的具体样式配置
}

3. **Swiper组件**：
- 使用微信官方提供的`wx:for`指令遍历轮播图片，配合Swiper组件的API（如`change`、`bindCurrentIndexChanged`等）实现轮播功能。

<swiper current="{{currentIndex}}" index="{{index}}" change="onSlideChange">
  <block wx:for="{{items}}">
    <view>{{item.title}}</view> <!-- 或者使用img标签显示图片 -->
  </block>
</swiper>

Page({
  // ...其他数据和生命周期方法
  onSlideChange(e) {
    console.log('当前索引:', e.detail.current);
  }
})