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; " 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>

Vux使用经验的更多相关文章

  1. MyEclipse10--的使用经验

    MyEclipse10--的使用经验总结 ------------------ 1.MyEclipse中的验证validation----->>用MyEclipse做ExtJs项目研发的时 ...

  2. 关于Vue vuex vux 文档

    01. vue 链接 http://vuejs.org.cn/guide/ 02. vuex  ----->>状态管理模块儿<<------- https://vuex.vue ...

  3. XCode的个人使用经验

    Xcode是强大的IDE(但个人觉得不如Visual Studio做得好),其强大功能无需本人再赘述,本文也不是一篇“快捷键列表”,因为XCode上的快捷键极其多,而且还有不少是需要同时按下四个按键的 ...

  4. Vue系列：在vux的popup组件中使用百度地图遇到显示不全的问题

    问题描述: 将百度地图封装成一个独立的组件BMapComponent,具体见 Vue系列:如何将百度地图包装成Vue的组件(http://www.cnblogs.com/strinkbug/p/576 ...

  5. vux 中popup 组件 Mask 遮罩在最上层问题的解决

    1. 问题描述:popup弹出层在遮罩层下面的 2.原因:因为滚动元素和mask遮罩层在同一级,vux框架默认把遮罩层放在body标签下的 3.解决方法:更改一下源码,把mask遮罩层放在popup同 ...

  6. Flask-admin使用经验技巧总结

    笔者是看狗书入门的flask,狗书上对于flask-admin这个扩展并没有进行讲解,最近因为项目需要,学习使用flask-admin,瞬间体会到了flask开发的快速.扩展的强大 Flask-adm ...

  7. Unity3D使用经验总结 缺点篇

    不论是从官方手册,还是各种第三方教程,几乎涉及到的,都是讲如何使用U3D,以及U3D的优点. 虽然我是用的一个让步语气,但请不要否认U3D的这些优点,它们的确存在. 但对于一个引擎的特性来说,优点与缺 ...

  8. Unity3D使用经验总结 优点篇

    09年还在和其它小伙伴开发引擎的时候,Unity3D就初露头角. 当时就对这种基于组件式的设计结构很不理解. 觉得拆分过于细致,同时影响效率. 而时至今日,UNITY3D已经成为了众多团队的首选3D引 ...

  9. 如何优雅的使用vue+vux开发app -03

    如何优雅的使用vue+vux开发app -03 还是一个错误的示范,但是离优雅差的不远了... <!DOCTYPE html> <html> <head> < ...

随机推荐

  1. vue安装教程总结

    转载:https://blog.csdn.net/sunny1660/article/details/78326548 简介:       vue.js是一套构建用户界面的渐进式框架.比较简洁,用于解 ...

  2. Codeforces Round #450 (Div. 2) C. Remove Extra One

    题目链接 题意:让你去掉一个数,使得剩下的数的record最多,当1≤j<i的aj<ai1 \leq j< i的a_j<a_i1≤j<i的aj​<ai​时aia_i ...

  3. Kaldi的nnet2 Component

    FixedAffineComponent:类 LDA-like 的非相关转换,由标准的 weight matrix plus bias 组成(即Wx+b),通过标准的 stochastic gradi ...

  4. python 的基础 学习 第三

    1,in ,not in 判断子元素是是否在原字符串(字典,列表,集合)中,主要是用在检测敏感字 print('a' in 'abcchhhhd') 有则返回True, print('j' in 'a ...

  5. mybatis执行批量更新数据

    1.业务需求:同时执行多记录批量操作 2.实现方法:     1)mapping: 2) dao 层 3)Service 层(注意要使用Transactional,否则可能会导致数据紊乱) 4)Con ...

  6. day 11 - 2 装饰器练习

    1.编写装饰器,为多个函数加上认证的功能(用户的账号密码来源于文件)要求登录成功一次,后续的函数都无需再输入用户名和密码 FLAG = False def login(func): def inner ...

  7. Create C++ Class

    创建“目标物体”,是世界场景中的一个物体,当玩家经过时,可以将它拾起,并带至某处 选择Actor为父类,创建FPSObjectiveActor类   注:点击公有按钮就会把头文件放入Public文件夹 ...

  8. android gradle tools 3.X中dependencies, implementation和compile区别

    在3.0版本中,compile 指令被标注为过时方法,而新增了两个依赖指令,一个是implement 和api,这两个都可以进行依赖添加,但是有什么区别呢? api 指令 完全等同于compile指令 ...

  9. Spring重温(一)--Spring快速入门

    1.spring官网(https://repo.spring.io)下载依赖jar. 2.配置spring环境时还需要commons-logging相关jar. 3.打开eclise创建一个工程,并将 ...

  10. OsWatcher 使用详解

    软件下载地址: https://support.oracle.com/epmos/faces/DocumentDisplay?_afrLoop=520996062954556&id=30113 ...