微信小程序 书籍翻页功能

要实现微信小程序中的书籍翻页功能，可以使用小程序的 `swiper` 组件。 `swiper` 组件可以实现类似于图片轮播的效果，也可以用来实现书籍翻页的效果。

具体步骤如下：

1. 在 `wxml` 文件中，使用 `swiper` 组件创建一个容器，将每一页的内容放在 `swiper-item` 组件中：

<swiper class="book-swiper" duration="{{500}}" current="{{current}}" bindchange="swiperChange">
  <swiper-item>
    <!-- 第一页的内容 -->
  </swiper-item>
  <swiper-item>
    <!-- 第二页的内容 -->
  </swiper-item>
  <!-- 其他页的内容 -->
</swiper>

2. 在 `wxss` 文件中，设置 `swiper-item` 组件的样式，使其填满整个容器：

.swiper-item {
  width: 100%;
  height: 100%;
}

3. 在 `js` 文件中，设置 `current` 变量，表示当前显示的页码：

Page({
  data: {
    current: 0, // 当前页码
  },
  // ...
})

4. 在 `js` 文件中，监听 `swiper` 组件的 `bindchange` 事件，更新 `current` 变量的值：

Page({
  data: {
    current: 0, // 当前页码
  },
  swiperChange: function (e) {
    this.setData({
      current: e.detail.current
    })
  },
  // ...
})

5. 在 `js` 文件中，提供翻页的方法，用于修改 `current` 变量的值：

Page({
  data: {
    current: 0, // 当前页码
  },
  // 翻到下一页
  nextPage: function () {
    this.setData({
      current: this.data.current + 1
    })
  },
  // 翻到上一页
  prevPage: function () {
    this.setData({
      current: this.data.current - 1
    })
  },
  // ...
})

6. 在 `wxml` 文件中，添加翻页按钮，并绑定对应的方法：

<view class="page-buttons">
  <button class="prev-page" bindtap="prevPage">上一页</button>
  <button class="next-page" bindtap="nextPage">下一页</button>
</view>

7. 在 `wxss` 文件中，设置翻页按钮的样式：

.page-buttons {
  position: absolute;
  bottom: 20rpx;
  left: 0;
  right: 0;
  text-align: center;
}

.prev-page, .next-page {
  display: inline-block;
  padding: 10rpx 20rpx;
  margin: 0 10rpx;
  border: 1rpx solid #ccc;
  border-radius: 20rpx;
  font-size: 28rpx;
  color: #333;
  background-color: #fff;
  box-shadow: 0 2rpx 5rpx rgba(0, 0, 0, 0.1);
}

这样就可以实现微信小程序中的书籍翻页功能了。