Vux使用心得

参考链接

布局

简单平分：水平布局和垂直布局

<template>    <divider>Horizontal</divider>    <flexbox style="height:40px;">      <flexbox-item><div class="flex-demo">1</div></flexbox-item>      <flexbox-item><div class="flex-demo">2</div></flexbox-item>      <flexbox-item><div class="flex-demo">3</div></flexbox-item>    </flexbox>    <divider>Vertical</divider>    <flexbox orient="vertical" :margin-left=0>      <flexbox-item><div class="flex-demo" style="margin-left:0">1</div></flexbox-item>      <flexbox-item><div class="flex-demo" style="margin-left:0">2</div></flexbox-item>      <flexbox-item><div class="flex-demo" style="margin-left:0">3</div></flexbox-item>    </flexbox></template><script>    //引入组件    import {Divider,FlexboxItem,Flexbox} from 'vux/src/components'    //创造构造器    export default {        components: {            Divider,FlexboxItem,Flexbox        },    }    /*创造构造器的老版本的写法，编译的时候会报错，执行没有问题。    var MyComponent = Vue.extend{           components: {            Divider,FlexboxItem,Flexbox        },    }*/</script><style>    .flex-demo {      text-align: center;  /*文本居中显示*/      color: #EEE;      background-color: #0077FF;       margin-bottom: 16px;       border-radius: 6px; /*按钮的圆角弧度*/      -webkit-background-clip: padding-box;    }   </style>

嵌套布局

<template>    <flexbox :margin-left=0 style="height: 200px; background-color: #fff;" class="vux-1px-tb vux-1px-l vux-1px-r">      <flexbox-item class="vux-1px-r" style="height:200px;"></flexbox-item>      <flexbox-item>        <flexbox orient="vertical" :margin-left=0>          <flexbox-item class="vux-1px-b"></flexbox-item>          <flexbox-item style="height: 100px;"><!--height: 100% doesnot work here-->            <flexbox :margin-left=0>              <flexbox-item class="vux-1px-r"></flexbox-item>              <flexbox-item></flexbox-item>            </flexbox>          </flexbox-item>        </flexbox>      </flexbox-item>    </flexbox></template>

Scroller

Props

名字 类型 默认 描述 height String Viewport 高度 lockX Boolean false 锁定X方向 lockY Boolean false 锁定Y方向 scrollbarX Boolean false 横向滚动条 scrollbarY Boolean false 垂直方向滚动条 bounce Boolean true 是否有边缘回弹 use-pulldown Boolean false 是否使用下拉组件 use-pullup Boolean false 是否使用上拉组件 pulldown-config Object 见下面 下拉组件配置 pullup-config Object 见下面 上拉组件配置 pulldown-status String 无 双向绑定，当需要自定义下拉刷新行为时配置 pullup-status String 无 双向绑定，当需要自定义上拉行为时配置

Methods

reset方法，重新渲染，因为scroller并不知道内部内容是否变化，因此需要手动取得ref进行reset, 并且需要在$nextTick中执行。

this.$nextTick(() => {  this.$refs.scroller.reset()})

Events

scroller的uuid

名字 描述 实例 pullup:loading 上拉加载时触发的事件，需要在获取数据后使用$broadcast触发状态更新， this.$broadcast(‘pullup:reset’, uuid) pulldown:loading 下拉加载时触发的事件，需要在获取数据后使用$broadcast触发状态更新， this.$broadcast(‘pulldown:reset’, uuid) pullup:disable 禁用上拉加载，当没有更多数据需要禁用时使用$broadcast触发禁用， this.$broadcast(‘pullup:disable’, uuid) pullup:enable 启用上拉加载，禁用插件后，当又重新需要时使用$broadcast触发重新启用， this.$broadcast(‘pullup:enable’, uuid)

Slots

默认slot根元素必须有且只有一个, 如

content

tab选项卡

举个栗子

可以取消切换动画
active-color=”#fc378c”可以设置切换的颜色

<template>    <tab>      <tab-item :selected="demo1 === '已发货'" @click="demo1 = '已发货'">已发货</tab-item>      <tab-item :selected="demo1 === '未发货'" @click="demo1 = '未发货'">未发货</tab-item>      <tab-item :selected="demo1 === '全部订单'" @click="demo1 = '全部订单'">全部订单</tab-item>      <tab-item :selected="demo1 === '1'" @click="demo1" = '6666'>6666</tab-item>    </tab></template><script>    //引入组件    import {Tab, TabItem} from 'vux/src/components'    //创造构造器    export default {        components: {            Tab, TabItem        },        data () {            return {              demo1: '1'            }        }               }    /*创造构造器的老版本的写法，编译的时候会报错，执行没有问题。    var MyComponent = Vue.extend{           components: {            Divider,FlexboxItem,Flexbox        },    }*/</script><style>    .flex-demo {      text-align: center;      color: #fff;      background-color: #0077FF;      margin-bottom: 8px;      border-radius: 4px;      -webkit-background-clip: padding-box;    }</style>

更简洁的粟子

<tab :line-width="2" active-color="#fc378c">  <tab-item :selected="demo2 === item" v-for="item in list2" @click="demo2 = item"></tab-item></tab>export default {  data () {    return {      demo2: '美食',      list2: ['精选', '美食', '电影', '酒店', '外卖']    }  }}

Popup弹出层

Props

参数 说明 类型 默认值 show 是否显示 Popup，需要双向绑定 Boolean false height 弹出层高度 String auto 如果希望弹出层铺满整个屏幕，则可设置height=100%

Events

on-first-show 第一次出现时，用于需要在第一次进行异步数据获取或者必要的UI渲染（如Popup内有Scroller）

<template>    <div>        <group>            <switch title="WIFI" :value.sync="show"></switch>            <switch title="Full popup" :value.sync="show1"></switch>        </group>        <popup :show.sync="show">            <div class="popup0">                <group>                    <switch title="Another Switcher" :value.sync="show"></switch>                </group>            </div>        </popup>        <popup :show.sync="show1" height="80%">            <div class="popup1">                <group>                    <switch title="Another Switcher" :value.sync="show1"></switch>                </group>            </div>        </popup>    </div></template><script>//引入组件import {    Group,    Switch,    Popup,} from 'vux/src/components'//创造构造器export default {    components:{        Group,Switch,Popup    },    data () {        return {            show: false,            show1: false        }    }}/*创造构造器的老版本的写法，编译的时候会报错，执行没有问题。var MyComponent = Vue.extend{       components: {        Divider,FlexboxItem,Flexbox    },}*/</script><style>.popup0 {  padding-bottom:15px;  height:200px;}.popup1 {  width:100%;  height:100%;}</style>

Sticky 自动固定在顶部

<template>    <!-- <br v-for="i in number">中的number是调节高度的 -->    <br v-for="i in 5">    <sticky>        <tab :line-width=1>          <tab-item selected>正在正映</tab-item>          <tab-item>即将上映</tab-item>        </tab>    </sticky>    <br v-for="i in 50"></template><script>//引入组件import {    Sticky,    Tab,    TabItem} from 'vux/src/components'//创造构造器export default {    components:{        Tab,Sticky,TabItem    },    data () {        return {            show: false,            show1: false        }    }}/*创造构造器的老版本的写法，编译的时候会报错，执行没有问题。var MyComponent = Vue.extend{       components: {        Divider,FlexboxItem,Flexbox    },}*/</script>

顶部滚动广告

<template>  <div>    <scroller lock-x scrollbar-y use-pulldown @pulldown:loading="load" enable-horizontal-swiping>       <div class="box2">          <swiper :list="list" direction="horizontal" auto :min-moving-distance="20" height="180px"></swiper>       </div>    </scroller>  </div></template><script>import { Scroller, Swiper } from 'vux/src/components'export default {  components: {    Scroller,    Swiper  },  methods: {    load (uuid) {      const _this = this      setTimeout(function () {        _this.$broadcast('pulldown:reset', uuid)      }, 2000)    }  },  data () {    return {      list: [{        url: 'http://mp.weixin.qq.com/s?__biz=MzAxNjU0MDYxMg==&ampmid=400385458&ampidx=1&ampsn=78f6b8d99715384bdcc7746596d88359&ampscene=19#wechat_redirect',        img: 'http://7xqzw4.com2.z0.glb.qiniucdn.com/1.jpg',        title: '如何手制一份秋意的茶？'      }, {        url: 'http://mp.weixin.qq.com/s?__biz=MzAxNjU0MDYxMg==&ampmid=400160890&ampidx=1&ampsn=29ef02af25793a11a3f6aec92bfb46c1&ampscene=19#wechat_redirect',        img: 'http://7xqzw4.com2.z0.glb.qiniucdn.com/2.jpg',        title: '茶包VS原叶茶'      }, {        url: 'http://mp.weixin.qq.com/s?__biz=MzAxNjU0MDYxMg==&ampmid=400094682&ampidx=1&ampsn=8231a2053b772b2108784fccc254d28c&ampscene=19#wechat_redirect',        img: 'http://7xqzw4.com2.z0.glb.qiniucdn.com/3.jpg',        title: '播下茶籽，明春可发芽？'      }]    }  }}</script>

日期选择

<template>  <div>    <group title="default format: YYYY-MM-DD">      <datetime :value.sync="value1" @on-change="change" title="Birthday"></datetime>    </group>    <group title="YYYY-MM-DD HH:mm">      <datetime :value.sync="value2" format="YYYY-MM-DD HH:mm" @on-change="change" title="start time" inline-desc="select hour and minute"></datetime>    </group>    <group title="Placeholder">      <datetime :value.sync="value3" format="YYYY-MM-DD" placeholder="Please select" @on-change="change" title="start time"></datetime>    </group>    <group title="specified min-year and max-year">      <datetime :value.sync="value4" placeholder="Please select" :min-year=2000 :max-year=2016 format="YYYY-MM-DD HH:mm" @on-change="change" title="years after 2000"></datetime>    </group>    <group title="specified template text in Chinese">      <datetime :value.sync="value5" placeholder="请选择日期" :min-year=2000 :max-year=2016 format="YYYY-MM-DD HH:mm" @on-change="change" title="Chinese" year-row="{value}年" month-row="{value}月" day-row="{value}日" hour-row="{value}点" minute-row="{value}分" confirm-text="完成" cancel-text="取消"></datetime>    </group>  </div></template><script>import { Datetime, Group } from 'vux/src/components'export default {  components: {    Datetime,    Group  },  data () {    return {      value1: '2016-02-11',      value2: '',      value3: '',      value4: '',      value5: ''    }  },  methods: {    change (value) {      console.log('change', value)    }  }}</script>

表单

<template>  <div>    <group title="Default">      <x-input title="message" placeholder="I'm placeholder"></x-input>    </group>    <group title="不显示清除按钮">      <x-input title="message" placeholder="I'm placeholder" :show-clear="false" autocapitalize="characters"></x-input>    </group>    <group title="set is-type=china-name">      <x-input title="姓名" name="username" placeholder="请输入姓名" is-type="china-name"></x-input>    </group>    <group title="set keyboard=number and is-type=china-mobile">      <x-input title="手机号码" name="mobile" placeholder="请输入手机号码" keyboard="number" is-type="china-mobile"></x-input>    </group>    <group title="set is-type=email">      <x-input title="邮箱" name="email" placeholder="请输入邮箱地址" is-type="email"></x-input>    </group>    <group title="set min=2 and max=5">      <x-input title="2-5个字符" placeholder="" :min="2" :max="5"></x-input>    </group>    <group title="确认输入">      <x-input title="请输入6位数字" type="text" placeholder="" :value.sync="password" :min="6" :max="6" @on-change="change"></x-input>      <x-input title="请确认6位数字" type="text" placeholder="" :equal-with="password"></x-input>    </group>    <group title="验证码" class="weui_cells_form">      <x-input title="验证码" class="weui_vcode">        <img slot="right" src="http://weui.github.io/weui/images/vcode.jpg">      </x-input>      <x-input title="发送验证码" class="weui_vcode">        <x-button slot="right" type="primary">发送验证码</x-button>      </x-input>    </group>    <group title="check if value is valid when required===true">      <x-input title="message" placeholder="I'm placeholder" v-ref:input></x-input>      <cell title="get valid value" :value="'$valid value:' + $refs.input.valid"></cell>    </group>     <group title="check if value is valid when required===false">      <x-input title="message" placeholder="I'm placeholder" :required="false" v-ref:input02></x-input>      <cell title="get valid value" :value="'$valid value:' + $refs.input02.valid"></cell>    </group>  </div></template><script>import { XInput, Group, XButton, Cell } from 'vux/src/components'export default {  components: {    XInput,    XButton,    Group,    Cell  },  data () {    return {      password: '123465'    }  },  methods: {    change (val) {      console.log(val)    }  }}</script><style scoped>.weui_cell_ft .weui_btn {  margin-left: 5px;  vertical-align: middle;  display: inline-block;}</style>

单个计数器

<template>  <div>    <group title="Default">      <x-number name="number" title="Number"></x-number>    </group>    <group title="listen to change events">      <x-number name="listen" title="Number" :value="0" :min="0" @on-change="change"></x-number>    </group>    <group title="set width=100">      <x-number title="Number" :width="100"></x-number>    </group>    <group title="set step=0.5">      <x-number title="Number" :step="0.5"></x-number>    </group>    <group title="set value=1, min=-5 and max=8">      <x-number title="Number" :min="-5" :max="8" :value="1"></x-number>    </group>    <group title="fillable = false">      <x-number :value="10" title="Number" :fillable="false"></x-number>    </group>    <group title="with other element">      <x-number title="Number" :min="-5" :max="8" :value="1" type="inline"></x-number>      <x-number title="Number" :min="-5" :max="8" :value="1" type="inline"></x-number>      <switch title="Other element" :value.sync="true"></switch>    </group>  </div></template><script>import { Group, XNumber, Switch } from 'vux/src/components'export default {  components: {    XNumber,    Group,    Switch  },  methods: {    change (val) {      console.log('change', val)    }  }}</script>

图文组合列表

<template>  <div>    <group title="switch the type">      <radio title="type" :value.sync="type" :options="['1', '2', '3']"></radio>    </group>    <panel header="图文组合列表" :footer="footer" :list="list" :type="type"></panel>  </div></template><script>import { Panel, Group, Radio } from 'vux/src/components'export default {  components: {    Panel,    Group,    Radio  },  data () {    return {      type: '1',      list: [{        src: 'http://placeholder.qiniudn.com/60x60/3cc51f/ffffff',        title: '标题一',        desc: '由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。',        url: '/component/cell'      }, {        src: 'http://placeholder.qiniudn.com/60x60/3cc51f/ffffff',        title: '标题二',        desc: '由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。',        url: {          path: '/component/radio',          replace: false        }      }],      footer: {        title: '查看更多',        url: 'http://vux.li'      }    }  }}</script>