Weex组件使用

Weex

一、容器

<div>基本容器

代码示例:

  <!-- div基本容器 -->
  <!-- 注意 -->
  <!-- 支持所有通用样式,特性,flexbox布局 -->
  <!-- 不能直接在标签中添加文本 -->
  <!-- 不可滚动,即使显式设置高度 -->
  <!-- 嵌套不可过多,建议在10层以内 -->
<template>
  <div class="div">
    <text>div 基本容器</text>
  </div>
</template>

<style>
/*div-样式*/
.div{
  background-color: orange;
  color: gray;
  margin: 50px;
  width: auto;
  height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
</style>

界面显示:

<div>

<scroller>滚动容器

特性	说明	类型	描述
show-scrollbar	是否显示滚动条	boolean	默认true
scroll-direction	滚动方向	string	( horizontal, vertical)
loadmoreoffset	触发 loadmore偏移距离	number	默认0
loadmoreretry	是否 loadmore失败重置	number	默认0

代码示例:

<template>
  <scroller class="scroller">
    <div class="scroller-row" repeat="{{list}}">
      <text class="row-title">{{name}}</text>
    </div>
  </scroller>
</template>

<script>
var rowList = [
  {name:"row-0"},
  {name:"row-1"},
  {name:"row-2"},
  {name:"row-3"},
  {name:"row-4"},
  {name:"row-5"},
]
export default {
  data: {
      list: rowList,
    }
}
</script>

<style>
/*scroller样式*/
.scroller{
  width: auto;
  height: 800px;
  background-color: gray;
}
.row-title{
  background-color: orange;
  font-size: 80px;
  margin: 20px;
}
</style>

界面显示:

<scroller>

二、基本组件

<text>文本

特性	说明	类型	描述
value	文本值	string	.

样式	说明	类型	描述
color	字体颜色	color
lines	文本行数	number	默认0行,不限制行数
font-size	字体大小	number
font-style	字体样式	string	(normal, italic)
font-weight	字体宽度	string	(normal, bold, 100, 200, 300, 400, 500, 600, 700, 800, 900)
text-align	对其方式	string	(none, underline, line-through)
text-decoration	文本装饰	string	(left, center, right)
text-overflow	文本溢出	string	(clip, ellipsis)
line-height	行高	number	.

代码示例:

<!-- 注意 -->
<!-- text里直接写文本头尾空白会被过滤 -->
<template>
  <div>
    <text class="text" style="lines:2;">{{text}}</text>
  </div>
</template>

<script>
export default {
  data: {
      text: "Weex 是一套简单易用的跨平台开发方案，能以 Web 的开发体验构建高性能、可扩展的原生应用。Vue 是一个轻量并且功能强大的渐进式前端框架。",
    }
}
</script>

<style>
/*text样式*/
.text{
  background-color: gray;
  color: white;
  margin: 20px;
  width: auto;
  height: 200px;
  font-size: 20px;
  font-style: normal;
  font-weight: bold;
  text-align: center;
  text-overflow: ellipsis;
}
</style>

界面显示:

<text>

<image>图片

特性	说明	类型	描述
src	图片URL	string
resize	图片拉伸状态	string	(stretch, cover, contain)

代码示例:

<template>
  <!-- 注意 -->
  <!-- 必须明确指定width和height -->
  <!-- <image>中不支持任何组件,需要使用<image>和position来定位实现 -->
  <div class="image-box" >
    <image class="image" resize="cover" src="{{imageURL}}"></image>
  <div class="title-box">
    <text class="title">Alan Mathison Turing</text>
  </div>
</div>
</template>

<script>
export default {
  data: {
      imageURL: "https://img.alicdn.com/tps/TB1dX5NOFXXXXc6XFXXXXXXXXXX-750-202.png",
    }
}
</script>

<style>
/*image样式*/
.image-box {
  background-color: gray;
  width: auto;
  height: 300px;
  justify-content: center;
  align-items: center;
  align-self: center;
}
.image {
  width: 600px;
  height: 200px;
}
/*title样式*/
.title-box {
  width: 750px;
  height: 300px;
  justify-content: center;
  align-items: center;
  position: absolute;
  /*background-color: purple;*/
}
.title {
  color: #ffffff;
  font-size: 32px;
  font-weight: bold;
  background-color: orange;
}
</style>

界面显示:

<image>

<switch>开关

特性	说明	类型	描述
checked	是否开启	boolean	默认 false
disabled	是否可用	boolean	默认 false

代码示例:

<template>
  <div>
    <switch class="switch" checked="true" disabled="true"></switch>
  </div>
</template>
<script>
export default {
}
</script>

<style>
/*switch样式*/
.switch{
  margin: 20px;
  align-self: center;
  margin-top: 20px;
}
</style>

界面显示:

<switch>

<input>单行文本输入

特性	说明	类型	描述
type	控件类型	string	(text, password, url, email, tel)
value	文本值	string
placeholder	占位符	string
disabled	是否可用	boolean
autofocus	自动获得输入焦点	boolean
maxlength	输入最大长度	nubmer	.

样式	说明	类型	描述
placeholder-color	占位符颜色	color
color	字体颜色	color
font-size	字体大小	number
font-style	字体样式	string	(normal, italic)
font-weight	字体宽度	string	(normal, bold, 100, 200, 300, 400, 500, 600, 700, 800, 900)
text-align	对其方式	string	(none, underline, line-through)

代码示例:

<template>
  <div>
    <input class="input" type="text" placeholder="请输入text" disabled="false" autofocus="false" maxlength="10"></input>
    <input class="input" type="password" placeholder="请输入password" disabled="false" autofocus="false" maxlength="10"></input>
    <input class="input" type="url" placeholder="请输入url" disabled="false" autofocus="false" maxlength="10"></input>
    <input class="input" type="email" placeholder="请输入email" disabled="false" autofocus="false" maxlength="10"></input>
    <input class="input" type="tel" placeholder="请输入tel" disabled="false" autofocus="false" maxlength="10"></input>
  </div>
</template>

<script>
export default {
}
</script>

<style>
/*input样式*/
.input {
  color: black;
  border-width: 2px;
  border-style: solid;
  border-color: #41B883;
  width: auto;
  height: 100px;
  margin: 20px;
  padding: 10px;
  font-size: 30px;

 }
</style>

界面显示:

<input>

<textarea>多行文本输入

特性	说明	类型	描述
value	文本值	string
placeholder	占位符	string
disabled	是否可用	boolean
autofocus	自动获得输入焦点	boolean
rows	输入框行高	number	.

代码示例:

<template>
  <div>
    <textarea class="textarea" placeholder="请输入文本" disabled="false" autofocus="false" rows="3"></textarea>
  </div>
</template>

<script>
export default {
}
</script>

<style>
/*textarea样式*/
.textarea{
    font-size: 30px;
    width: 650px;
    margin-top: 20px;
    margin-left: 50px;
    padding-top: 10px;
    padding-left: 10px;
    padding-bottom: 10px;
    padding-right: 10px;
    color: black;
    border-width: 2px;
    border-style: solid;
    border-color: #41B883;
}
</style>

<textara>

三、多媒体组件

<video>视频

特性	说明	类型	描述
src	视频URL	string
play-status	播放状态	string	(play, pause)
auto-play	是否自动播放	boolean	.

代码示例:

<template>
  <div>
    <video class="video" src="{{videoURL}}" play-status="play" auto-play="false"></video>
  </div>
</template>

<script>
export default {
  data: {
      videoURL: "http://flv2.bn.netease.com/videolib3/1611/01/XGqSL5981/SD/XGqSL5981-mobile.mp4",
    }
}
</script>

<style>
/*video样式*/
.video{
    align-self: center;
    margin-top: 20px;
    width: 650px;
    height: 350px;
}
</style>

界面显示:

<video>

<web>网页

特性	说明	类型	描述
src	网页URL	string	.

代码示例:

<template>
  <div>
    <web class="web" src="{{webURL}}"> </web>
  </div>
</template>

<script>
export default {
  data: {
      webURL: "https://m.taobao.com",
    }
}
</script>

<style>
/*web样式*/
.web{
  align-self: center;
  margin: 10px;
  width: 750px;
  height: 1200px;
}
</style>

界面显示:

<web>

<slider>轮播图

特性	说明	类型	描述
auto-play	是否自动播放	boolean	默认false
interval	播放间隔	number	毫秒

<indicator>轮播图指示

样式	说明	类型	描述
item-color	点颜色	color
item-selected-color	选中点颜色	color
item-size	点大小	number	.

代码示例:

<template>
  <div>
    <slider class="slider" auto-play="ture" interval="3000">
      <div repeat="{{list}}">
        <image class="slider-image" resize="cover" src="{{src}}"></image>
      </div>
    <!-- 注意 -->
    <!-- <indicator>必须充当 <slider> 组件的子组件使用 -->
      <indicator class="slider-dot" style="item-color:gray; item-selected-color:white; item-size:10px;"></indicator>
    </slider>
  </div>
</template>

<script>
var imageList = [
  { src: 'https://gd2.alicdn.com/bao/uploaded/i2/T14H1LFwBcXXXXXXXX_!!0-item_pic.jpg'},
  { src: 'https://gd1.alicdn.com/bao/uploaded/i1/TB1PXJCJFXXXXciXFXXXXXXXXXX_!!0-item_pic.jpg'},
  { src: 'https://gd3.alicdn.com/bao/uploaded/i3/TB1x6hYLXXXXXazXVXXXXXXXXXX_!!0-item_pic.jpg'},
  { src: 'https://gd2.alicdn.com/bao/uploaded/i2/T14H1LFwBcXXXXXXXX_!!0-item_pic.jpg'},
  { src: 'https://gd1.alicdn.com/bao/uploaded/i1/TB1PXJCJFXXXXciXFXXXXXXXXXX_!!0-item_pic.jpg'},
  { src: 'https://gd3.alicdn.com/bao/uploaded/i3/TB1x6hYLXXXXXazXVXXXXXXXXXX_!!0-item_pic.jpg'}
]
export default {
  data: {
      list: imageList,
    }
}
</script>

<style>
/*slider样式*/
.slider{
  width: 750px;
  height: 500px;
  background-color: gray;
}
.slider-image{
  width: 750px;
  height: 500px;
}
.slider-dot{
    width: 750px;
    height: 500px;
    bottom: -200px;
}
</style>

界面显示:

<slider>