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. Rootkit介绍

    Rootkit 是一种特殊类型的 malware(恶意软件). Rootkit 之所以特殊是因为您不知道它们在做什么事情.Rootkit 基本上是无法检测到的,而且几乎不能删除它们. 虽然检测工具在不 ...

  2. [C++]PAT乙级1004. 成绩排名 (20/20)

    /* 1004. 成绩排名 (20) 读入n名学生的姓名.学号.成绩,分别输出成绩最高和成绩最低学生的姓名和学号. 输入格式:每个测试输入包含1个测试用例,格式为 第1行:正整数n 第2行:第1个学生 ...

  3. rem和em学习笔记及CSS预处理（未完待续）

    以下为读http://www.w3cplus.com/css/when-to-use-em-vs-rem.html的感悟,收获满满! 1.当元素A的字体单位是n rem时,它将根据根元素(html)的 ...

  4. 基础必备Linux操作

    求助 1. --help 指令的基本用法与选项介绍. 2. man man 是 manual 的缩写,将指令的具体信息显示出来. 3. info info 与 man 类似,但是 info 将文档分成 ...

  5. 第26月第7天 mac如何matplotlib中文乱码问题

    1.mac如何matplotlib中文乱码问题 先查看 ~/.matplotlib/fontList.json 添加SimHei字体(simhei.ttf文件)到 /Library/Framework ...

  6. Coconuts HDU - 5925 (二维离散化求连通块的个数以及大小)

    题目链接: D - Coconuts  HDU - 5925 题目大意:首先是T组测试样例,然后给你n*m的矩阵,原先矩阵里面都是白色的点,然后再输入k个黑色的点.这k个黑色的点可能会使得原先白色的点 ...

  7. docker安装问题：E: Package 'docker-ce' has no installation candidate

    我的环境是在vm虚拟机中,Ubuntu17.04 前期安装步骤不过多介绍,下面这个博客就很好 ubuntu16.10安装docker17.03.0-ce并配置国内源和加速器 http://www.cn ...

  8. linux 软件包管理介绍

  9. 记一次手动SQL注入

    1.检测到可能存在注入漏洞的url 最常用的 ' ,and 1=1 ,and 1=2 http://www.xxx.com/subcat.php?id=1 2.判断字段个数 http://www.xx ...

  10. NMON使用以及nmon_analyse生成分析报表

    在我们监控我们的操作系统的时候如果可以把各个硬件的监控信息生成形象化的分析报表图对于我们来说是件太好的事情了,而通过ibm的nom和nmon_analyser两者的结合完全可以实现我们的要求.首先对n ...