weex-10-组件a的使用

本节任务

学习 a标签的使用

定义

<a>组件定义了指向某个页面的一个超链接。

请注意

1.这个超链接一定是weex页面的打包后的js地址,不能是html页面
2.不能设置<a>组件为自己的子组件

3.不能直接在<a>中添加文本 需要设置<text>为其子标签,这样配合使用
4.不要给<a>标签添加click 事件,因为它已经有单击事件。如果你添加了,没法确保执行的顺序!

我们看一下具体实现方法

<template>
    <div class="root">
    <a  href="http://dotwe.org/raw/dist/c1b1a5fdcf0937df1d847f8812a7ccb2.bundle.wx"><text class="text">跳转</text></a>
  </div>
</template>

这里提醒各位一下 href 一定要写在 a标签里

4A014B24-5F91-4C0B-9B2B-D802E2BDA110.png

实现这种样式我用两种方案实现

• 第一种

<template>
  <div class="root">
    <a href="http://dotwe.org/raw/dist/c1b1a5fdcf0937df1d847f8812a7ccb2.bundle.wx" class="a"><text class="text1" >跳转</text></a>
  </div>
</template>
<script>
</script>
<style>
.root{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.a{
    background-color: rosybrown;
    width:300px;
    height: 50px;
}   
.text1{
    text-align: center;
    line-height: 50px;
}
</style>

• 第二种

<template>
<div class="root">
    <a href="http://dotwe.org/raw/dist/c1b1a5fdcf0937df1d847f8812a7ccb2.bundle.wx" ><text class="text" >跳转</text></a>
</div>
</template>
<script>
</script>
<style>
.root{
    display: flex;
    flex-direction: column;
    align-items: center;
}   
.text{
    background-color: rosybrown;
    width:300px;
    height: 50px;
    text-align: center;
    line-height: 50px;
}
</style>

上面两种布局的结构都是一样的！

a标签使用起来比较简单,先留下一个问题,如果想要跳转到html页面怎么实现？我们后面会讲到!