本节任务
学习 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页面怎么实现？我们后面会讲到!
