微信小程序使用swiper做出可以登录页面可点击手机号登录邮箱登录

微信小程序中的 Swiper 组件是一个非常实用的轮播图组件，但它本身并不直接支持做成登录页的样式，尤其是带有手机号或邮箱登录的选择功能。不过，你可以将 Swiper 结合其他 HTML 和 CSS 样式以及 JavaScript 或者微信小程序提供的 login 组件来实现类似的效果。

以下是一种基本思路：

1. 首先，在你的 WXML 文件中创建一个包含两个选项按钮的 Swiper 子视图结构：

<view class="swiper-container">
  <swiper indicator-dots>
    <swiper-item wx:for="{{loginMethods}}">
      <view class="login-method" bindtap="handleLoginMethodTap">
        {{item.method}}
      </view>
    </swiper-item>
  </swiper>
</view>

其中，`loginMethods` 是一个数组，包含了 '手机号' 和 '邮箱' 等登录选项。

2. 使用 CSS 对 `login-method` 类进行样式定制，使其看起来像可点击的元素，并且有适当的动画效果。

3. 在 JS 文件中编写事件处理函数 `handleLoginMethodTap`，当用户点击任一登录方式时，可以根据选中的内容触发相应的登录逻辑，例如跳转到对应的页面：

Page({
  data: {
    loginMethods: ['手机号', '邮箱'],
  },
  
  handleLoginMethodTap(e) {
    let method = e.currentTarget.dataset.method;
    if (method === '手机号') {
      // 跳转至手机号登录页
    } else if (method === '邮箱') {
      // 跳转至邮箱登录页
    }
  },
})

4. 为了实现在微信小程序中实际的登录功能，你需要调用微信小程序提供的 `wx.login()` 和 `wx.getUserInfo()` 函数，或者集成第三方登录服务。