examples/vue/showcase/tap-penetrate.vue

<template>
  <div>
  <div class="items-box">
    <a weex-type="a" class="items" @click="clickitem('Tap1')">
      <text class="text">Tap1</text>
    </a>
    <a weex-type="a" class="items" @click="clickitem('Tap2')">
      <text class="text">Tap2</text>
    </a>
  </div>
  <div class="items-box">
    <a weex-type="a" class="items" @click="clickitem('Tap in the a tag')" href="http://weex.apache.org/cn/references/" target="_blank">
      <text class="text">Tap in the A tag</text>
    </a>
    <a weex-type="a" class="items" @click="preventDefault" :href="href" target="_blank">
      <text class="text">Prevent A tag from href jumping</text>
    </a>
  </div>
  <div class="items-box">
    <a weex-type="a" class="items" href="http://weex.apache.org/cn/references/" target="_blank">
      <text class="text">Url</text>
    </a>
    <a weex-type="a" class="items" href="http://weex.apache.org/cn/references/" target="_blank">
      <text class="text">Url</text>
    </a>
  </div>
  <div class="items-box">
    <a weex-type="a" class="items" href="http://weex.apache.org/cn/references/" target="_blank">
      <text class="text">Url</text>
    </a>
    <a weex-type="a" class="items" href="http://weex.apache.org/cn/references/" target="_blank">
      <text class="text">Url</text>
    </a>
  </div>
  <div class="items-box">
    <a weex-type="a" class="items" href="http://weex.apache.org/cn/references/" target="_blank">
      <text class="text">Url</text>
    </a>
    <a weex-type="a" class="items" href="http://weex.apache.org/cn/references/" target="_blank">
      <text class="text">Url</text>
    </a>
  </div>
  

  <div class="wrapper" @click="backTop" v-if="show">
    <text class="text">Tap</text>
  </div>
  </div>
</template>

<style scoped>
  .items-box{
    flex-direction: row;
    justify-content: space-between;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-box-pack: justify;
  }
  .items{
    flex-flow: row nowrap; 
    align-items: center; 
    overflow: hidden; 
    position: relative; 
    top: 0px; left: 0px; 
    box-sizing: border-box; 
    width: 374px; 
    height: 564px; 
    flex-basis: auto; 
    font-size: 0px; 
    border-color: rgb(0, 0, 0); 
    border-style: solid; 
    background-color: rgb(245, 245, 245); 
    margin-bottom: 2px; 
    text-align: center; 
  }
  .flexRow {
    flex-direction: row;
  }

  .flexColumn {
    flex-direction: column;
  }

  .text {
    flex: 1;
    text-align: center;
  }
  
  .fixed {
    position: fixed;
    bottom: 50px;
    left: 50px;
    width: 300px;
    height: 50px;
    align-items: center;
    justify-content: center
  }

  .shopImg {
    width: 220px;
    height: 220px;
  }

  .list {
    flex-direction: column;
    overflow: hidden;
    width: 750px;
    height: 100%;
    background-color: #dddddd;
  }

  .cell {
    background-color: #dddddd;
    flex-direction: column;
    width: 750px;
  }

  .test {
    width:60px;
    height:60px;
  }

  .shopDiv {
    flex-direction: column;
    background-color: #ffffff;
    margin: 5px;
    padding: 10px;
    border-width: 1px;
    border-color: #cccccc;
    overflow: visible;
  }

  .shopRowList {
    flex-direction: column;
    border-width: 1px;
    border-color: #cccccc;
    overflow: visible;
    margin: 5px;
    padding: 10px;
    background-color: #ffffff;
  }

  .shopHeader {
    flex-direction: row;
    width: 720px;
  }

  .shopFooter {
    flex-direction: row;
    width: 720px;
  }

  .smallImg {
    width: 20px;
    height: 20px;
  }
  .wrapper {
    background-color: #f8f8f8;
    border:1px solid #ddd;
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 88px;
    height: 88px;
    z-index: 10100;
    flex-flow: row nowrap; 
    align-items: center; 
    cursor: pointer;
  }
  .backTop {
    width: 88px;
    height: 88px;
  }
</style>

<script>
  var modal = weex.requireModule('modal')
  var dom = weex.requireModule('dom')
  module.exports = {
    data: function () {
      return {
        show: true,
        href: 'http://weex.apache.org/cn/references/'
      }
    },
    methods: {
      clickitem: function(e) {
        modal.toast({
          message:'click' + e
        })
      },
      preventDefault: function(e) {
        this.href = 'javascript:void(0)'
        modal.toast({
          message:'click'
        })
      },
      backTop: function () {
        let self = this
        window.scrollTo(0, 0)
        this.show = false
      }
    }

  }
</script>