Weex 标签控件

Posted 2020-08-02 L先森

1.滚动组件

<template>
  <scroller>
    <div repeat="{{list}}">
      <text>{{name}}: ${{price}}</text>
    </div>
  </scroller>
</template>

<script>
  module.exports = {
    data: {
      list: [
        {name: ‘...‘, price: 100},
        {name: ‘...‘, price: 500},
        {name: ‘...‘, price: 1.5},
        ...
      ]
    }
  }
</script>

2.输入框

type：text, password, url, email, tel etc，W3C标准

value：默认值

placeholder：占位符

disabled：一个布尔属性表明交互的表单控件不可用。特别是,点击事件不会派遣禁用控件

autofocus：一个布尔属性允许指定一个表单控制页面加载时应该有输入焦点

事件：

• input: 元素值变化事件.
• change: 用户输入值变化事件，总是在blur事件之后.
• focus: 组件获取到焦点的事件.
• blur: 元素失去焦点事件.

<div>
  <input
    type="url"
    autofocus="true"
    placeholder="..."
    value="http://alibaba.github.io/weex/"
    style="placeholder-color: #666666;">
  </input>
</div>

3.switch

checked:默认值（true，false）

事件：

click：点击事件

<div>
  <text>muted:</text>
  <switch checked="true"></switch>
</div>

4.video

属性

• src: <string> 影片链接.
• play-status: <boolean> play | pause. 控制影片播放或者暂停，默认是暂停.
• auto-play: <boolean> true | false. 自动播放控制，初始状态为不播放.

事件

• start: 触发播放事件.
• pause: 触发暂停事件.
• finish: 播放完毕事件.
• fail: 无法播放事件.

<div>
    <video class="video" auto-play="true" play-status="play" src="..." style="width:500;height:500;"></video>
</div>

 5.a

<a href="http://g.tbcdn.cn/ali-wireless-h5/res/0.0.16/hello.js">
   <text>Click me to see how ‘A‘ element opens a new world.</text>
</a>

 

6.web

属性

• src: <string>加载URL地址.

事件

• pagestart: 页面开始加载时事件.
• pagefinish: 页面加载完成时事件.
• error: 页面加载异常事件.

<div>
  <web style="width=...; height=...;" src="..."     onpagestart="pagestart" onpagefinish="pagefinish"     onerror="error">
  </web>
</div>

 

7.wxc-tabbar

描述

"wxc-tabbar”标签实现了一个专门的组件对应于radio-style选择。它显示选项卡底部的窗口用于选择不同的模式和显示之间的不同weex页模式。

属性

tab-items

这个属性包含tab-item对象数组,其中每个对应于radio-style选择。在这个属性的顺序对应于屏幕上物品的顺序。您可以配置tab-item tabbar的外观设置。每个tabitem属性可以描述如下

• index: <integer> 索引，排序.
• title: <string> 标题，为空不显示.
• titleColor: <color>标题颜色，默认为黑色.
• image: <string> 未选中时的图像，为空不显示.
• selectedImage: <string> 选中时的图像，为空不显示.
• src: <string> 页面需要显示的内容.
icon: <string>.
• visibility: <string>visible | hidden.

<template>
  <div style="flex-direction: column;">
    <wxc-tabbar tab-items = {{tabItems}}></wxc-tabbar>
  </div>
</template>

<script>
  require(‘weex-components‘);
  module.exports = {
    data: {
      dir: ‘examples‘,
      tabItems: [
        {
          index: 0,
          title: ‘tab1‘,
          titleColor: ‘#000000‘,
          icon: ‘‘,
          image: ‘http://gtms01.alicdn.com/tps/i1/TB1qw.hMpXXXXagXXXX9t7RGVXX-46-46.png‘,
          selectedImage: ‘http://gtms04.alicdn.com/tps/i4/TB16jjPMpXXXXazXVXX9t7RGVXX-46-46.png‘,
          src: ‘component/tabbar/tabbar-item.js?itemId=tab1‘,
          visibility: ‘visible‘,
        },
        {
          index: 1,
          title: ‘tab2‘,
          titleColor: ‘#000000‘,
          icon: ‘‘,
          image: ‘http://gtms03.alicdn.com/tps/i3/TB1LEn9MpXXXXaUXpXX9t7RGVXX-46-46.png‘,
          selectedImage: ‘http://gtms02.alicdn.com/tps/i2/TB1qysbMpXXXXcnXXXX9t7RGVXX-46-46.png‘,
          src: ‘component/tabbar/tabbar-item.js?itemId=tab2‘,
          visibility: ‘visible‘,
        },
        {
          index: 2,
          title: ‘tab3‘,
          titleColor: ‘#000000‘,
          icon: ‘‘,
          image: ‘http://gtms01.alicdn.com/tps/i1/TB1B0v5MpXXXXcvXpXX9t7RGVXX-46-46.png‘,
          selectedImage: ‘http://gtms04.alicdn.com/tps/i4/TB1NxY5MpXXXXcrXpXX9t7RGVXX-46-46.png‘,
          src: ‘component/tabbar/tabbar-item.js?itemId=tab3‘,
          visibility: ‘visible‘,
        }
      ],
    }
  }
</script>

 

 

<template>
  <wxc-navpage height={{...}} background-color="..." title="..." title-color="..." left-item-title="..." left-item-color="..." right-item-src="...">
      <content> ...</content>
  </wxc-navpage>
</template>
<script>
  require(‘weex-components‘);
  module.exports = {
    created: function() {
        this.$on(‘naviBar.rightItem.click‘,function(e){
           //handle your click event here.
        });

        this.$on(‘naviBar.leftItem.click‘,function(e){
          //handle your click event here. 
        });
    }
  }
</script>