收藏
回答

click点击事件不生效,没有反应?vant UI组件.

编译后click事件触发不了事件 ,需要关掉开发者工具再开才能点击,

调试基础库:2.15.0

环境:mac Big Sur 11.6

启动时会报一个警告:

代码如下 :


<view class="container">
  <van-toast id="van-toast" />
  <van-icon size="88px" name="friends-o" />
  <text>爆爆奢助手</text>
  <view class="page-section">
    <view class="flex-wrp" style="flex-direction:column;">
      <van-cell-group>
        <van-field class="flex-item flex-item-V" model:value="{{ mobile }}" label="手机号" placeholder="请输入手机号"/>
        <van-field class="flex-item flex-item-V" model:value="{{ code }}" center clearable label="短信验证码" placeholder="请输入短信验证码">
          <van-button slot="button" color="rgb(51,51,51)" size="small" loading="{{codeLoading}}" loading-text="{{ConfirmCodeTime}}" type="primary" bind:click="sendConfirmCode">
            发送验证码
          </van-button>
        </van-field>
        <van-row class="login-btn">
          <van-col offset="6" span="12">
            <van-button color="rgb(51,51,51)" hairline round type="primary" block size="normal" bind:click="login" loading="{{loginLoading}}">
              登陆
            </van-button>
          </van-col>
        </van-row>
      </van-cell-group>
    </view>
  </view>
</view>


// pages/login/login.ts
import Toast from '../../miniprogram_npm/@vant/weapp/toast/toast'
import { request } from '../../utils/request'


Page({


  /**
   * 页面的初始数据
   */
  data: {
    mobile: '',
    code: '',
    codeLoading: false,
    ConfirmCodeTime: '',
    loginLoading:false,
    waitCode:0
  },


  /**
   * 生命周期函数--监听页面加载
   */
  onLoad() {
    console.log('onLoad')
  },


  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {
    console.log('onReady')
  },


  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {
    wx.hideHomeButton()
  },


  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {
  },


  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {
  },


  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {
  },


  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {
  },


  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {
  },
  test(){
    console.log('test')
  },
   sendConfirmCode() {
     console.log('sendConfirmCode')
     if (!this.data.mobile) return Toast.fail('请填写手机号');
     console.log('sendConfirmCode')
     let time = 60
     const timeStop = setInterval(() => {
       const next = time--
       this.setData({ ConfirmCodeTime: next + '秒后重发' })
       console.log(next)
       if (next > 0) {
         this.setData({ codeLoading: true })
       } else {
         clearInterval(timeStop);
         this.setData({ codeLoading: false })
       }
     }, 1000)
     this.setData({waitCode:timeStop})
     request('login/send-code', 'POST', { mobile: this.data.mobile })
       .then(async () => wx.showToast({
         title: '请查收验证码短信',
         icon: 'none',
         duration: 5000
       })).catch(() => {
         clearInterval(timeStop)
         this.setData({ codeLoading: false })
       })
   },
   login() {
     console.log('login')
     if (!this.data.mobile) return Toast.fail('请填写手机号');
     if (!this.data.code) return Toast.fail('请填写验证码');
     this.setData({ loginLoading: true })
     request('login/login', 'POST', {
       mobile: this.data.mobile,
       code: this.data.code
     }).then(async (data) => {
         wx.showToast({
           title: '登录成功',
           icon: 'none',
           duration: 5000
         });
         clearInterval(this.data.waitCode);
         wx.setStorageSync('me2', data);
         wx.redirectTo({ url: '/pages/index/index' });
       })
       .finally(() => this.setData({ loginLoading: false }));
   }
})
最后一次编辑于  2021-11-04
回答关注问题邀请回答
收藏

2 个回答

  • Z
    Z
    2022-03-27

    楼主解决这个问题了吗?我也是用的vant组件 ,在用 Field做输入框的时候,click-right-icon事件也没有办法触发

    2022-03-27
    有用
    回复 2
    • W
      W
      2023-02-16
      楼主解决这个问题了吗?
      2023-02-16
      回复
    • 名字
      名字
      2023-10-31
      好哥哥,解决了吗,我也是click-right-icon不生效
      2023-10-31
      回复
  • Code Weaver
    Code Weaver
    2021-11-03

    不是bindtap么?

    2021-11-03
    有用
    回复 2
    • 茫
      2021-11-04
      click是vant封装的事件,onload的时候bindtap仍然可以点击
      2021-11-04
      回复
    • 茫
      2021-11-04回复
      loading
      2021-11-04
      回复
登录 后发表内容