weex click事件在PC端正常,而通过扫描二维码在安卓手机上预览时事件却失效,什么原因?

发布于 2022-09-07 20:52:52 字数 1679 浏览 25 评论 0

<template>
  <div class="index" id="page" bubble="true">
    <div class="btns" @click="change">
      <div class="button" id="btn1" :class="[Activebtn === 1? 'active' : '']">
        <text class="text">推荐</text>
      </div>
      <div class="button" id="btn2" :class="[Activebtn === 2? 'active' : '']" >
        <text class="text">热榜</text>
      </div>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  name: 'App',
  data () {
    return {
      Activebtn: 1
    }
  },
  computed: mapState(['items']),
  methods: {
    change (e) {
      if (e.target.parentNode.id === 'btn1' && this.Activebtn === 2) {
        
        this.Activebtn = 1
        this.$router.push('/recommed')
      } else if (e.target.parentNode.id === 'btn2' && this.Activebtn === 1) {
        
        this.Activebtn = 2
        this.$router.push('/hot')
      }
    }
  },
  created () {
    const obj = {url: '/api/feeds', pageNumber: 1, pageSize: 10}
    this.$store.dispatch('update', obj)
  }
}
</script>

<style scoped>
.btns{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  height: 87.5px;
}
.button{
  width: 375px;
  flex: auto;
  justify-content: center;
  background-color: white;
}
.text{
  flex: auto;
  text-align: center;
  font-size: 50px;
}
.index{
  background-color: rgb(240, 234, 234);
  height: 100%;
  display: flex;
  flex-direction: column;
}
.active{
  border-bottom-width: 5px;
  border-bottom-color: rgb(2, 191, 224);
}
</style>

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

明月松间行 2022-09-14 20:52:52

试试改用touch事件?

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文