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. PHPcms 缓存的读取和设置

    https://blog.csdn.net/huobobo124/article/details/76912632 1.PHPcms设置了保存和读取缓存的方法,其实现方法存储在PHPcms/lib/f ...

  2. CF961G Partitions

    传送门 luogu 显然每个数的贡献可以一起算感性理解一下,于是答案就是权值总和乘以每个数被算了几次 那个"集合大小为\(|S|\)的集合权值为权值和乘\(|S|\)",可以看成一 ...

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

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

  4. 【译】第五篇 SQL Server安全架构和安全

    本篇文章是SQL Server安全系列的第五篇,详细内容请参考原文. 架构本质上是一个数据库对象,其他对象的一个容器,在复杂的数据库中它能够很容易的管理各组对象.架构具有重要的安全功能.在这一篇你会学 ...

  5. 源码解读-文件上传angularFileUpload1

    angular-file-upload 1.文件上传模块的引入就不赘述,简单准备 2.初始化组件并绑定change事件 3.监听用户选择文件FileItem(change事件),push进文件数组qu ...

  6. Tip：什么是JavaBean

    可视化JavaBean  非可视化JavaBean(分:值JavaBean和工具JavaBean) JavaBean是一个遵循特定写法的Java类,它通常具有如下特点: 这个Java类必须具有一个无参 ...

  7. python小练习,利用dict，做一个简单的登录。

    '''利用字典实现登录'''users=[{'username':'jerry','pwd':'123456'},{'username':'tom','pwd':'1'}] def login(use ...

  8. springboot多模块开发以及整合dubbo\zookeeper进行服务管理

    之前研究了springboot单工程的使用,参考git地址:https://github.com/qiao-zhi/springboot-ssm 下面研究springboot多模块开发的过程. 1.模 ...

  9. Zookeeper环境搭建

    zookeeper支持windows.linux.mac等操作系统,其搭建方式也有集群.伪集群.单机环境.下面研究三种方式的搭建. 单机环境:windows操作系统 伪集群:windows 集群:li ...

  10. CF1099F Cookies

    题目地址:CF1099F Cookies 树形dp套树形数据结构 对每个节点 \(i\) ,分两步进行: 1.令 \(f_i\) 为Mitya在节点 \(i\) 停止游戏最多可以吃到多少块饼干 我们可 ...