当前位置： >
Vux使用心得
来源：INFOCOOL & 发布时间：
& 作者：网友 &
浏览次数：
摘要: 参考链接 布局 简单平分：水平布局和垂直布局 &template&
&divider&Horizontal&/divider&
简单平分：水平布局和垂直布局
&Horizontal&
style="height:40"&
& class="flex-demo"&1&&
& class="flex-demo"&2&&
& class="flex-demo"&3&&
&Vertical&
orient="vertical" :margin-left=0&
& class="flex-demo" style="margin-left:0"&1&&
& class="flex-demo" style="margin-left:0"&2&&
& class="flex-demo" style="margin-left:0"&3&&
import {Divider,FlexboxItem,Flexbox} from 'vux/src/components'
export default { components: { Divider,FlexboxItem,Flexbox }, }
& .flex-demo { text-align: center;
color: #EEE; background-color: #0077FF; margin-bottom: 16px; border-radius: 6px;
-webkit-background-clip: padding-box; } &
:margin-left=0 style="height: 200 background-color: #" class="vux-1px-tb vux-1px-l vux-1px-r"&
class="vux-1px-r" style="height:200"&&
orient="vertical" :margin-left=0&
class="vux-1px-b"&&
style="height: 100"&
:margin-left=0&
class="vux-1px-r"&&
scrollbarX
横向滚动条
scrollbarY
垂直方向滚动条
是否有边缘回弹
use-pulldown
是否使用下拉组件
use-pullup
是否使用上拉组件
pulldown-config
下拉组件配置
pullup-config
上拉组件配置
pulldown-status
双向绑定，当需要自定义下拉刷新行为时配置
pullup-status
双向绑定，当需要自定义上拉行为时配置
reset方法，重新渲染，因为scroller并不知道内部内容是否变化，因此需要手动取得ref进行reset, 并且需要在$nextTick中执行。
this.$nextTick(() =& { this.$refs.scroller.reset() })
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)
默认slot根元素必须有且只有一个, 如
可以取消切换动画
active-color=”#fc378c”可以设置切换的颜色
:selected="demo1 === '已发货'" @click="demo1 = '已发货'"&已发货&
:selected="demo1 === '未发货'" @click="demo1 = '未发货'"&未发货&
:selected="demo1 === '全部订单'" @click="demo1 = '全部订单'"&全部订单&
:selected="demo1 === '1'" @click="demo1" = '6666'&6666&
import {Tab, TabItem} from 'vux/src/components'
export default { components: { Tab, TabItem }, data () { return { demo1: '1' } } }
& .flex-demo { text-align: center; color: #fff; background-color: #0077FF; margin-bottom: 8px; border-radius: 4px; -webkit-background-clip: padding-box; } &
更简洁的粟子
&tab :line-width="2" active-color="#fc378c"&
&tab-item :selected="demo2 === item" v-for="item in list2" @click="demo2 = item"&&/tab-item&
export default {
demo2: '美食',
list2: ['精选', '美食', '电影', '酒店', '外卖']
Popup弹出层
Popup，需要双向绑定 Boolean
弹出层高度
String auto
如果希望弹出层铺满整个屏幕，则可设置height=100%
on-first-show 第一次出现时，用于需要在第一次进行异步数据获取或者必要的UI渲染（如Popup内有Scroller）
title="WIFI" :value.sync="show"&&
title="Full popup" :value.sync="show1"&&
:show.sync="show"&
class="popup0"&
title="Another Switcher" :value.sync="show"&&
:show.sync="show1" height="80%"&
class="popup1"&
title="Another Switcher" :value.sync="show1"&&
import { Group, Switch, Popup, } from 'vux/src/components'
export default { components:{ Group,Switch,Popup }, data () { return { show: false, show1: false } } }
& .popup0 { padding-bottom:15px; height:200px; } .popup1 { width:100%; height:100%; } &
Sticky 自动固定在顶部
v-for="i in 5"&
:line-width=1&
selected&正在正映&
&即将上映&
v-for="i in 50"&
import { Sticky, Tab, TabItem } from 'vux/src/components'
export default { components:{ Tab,Sticky,TabItem }, data () { return { show: false, show1: false } } }
顶部滚动广告
lock-x scrollbar-y use-pulldown @pulldown:loading="load" enable-horizontal-swiping&
class="box2"&
:list="list" direction="horizontal" auto :min-moving-distance="20" height="180px"&&
& 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./s?__biz=MzAxNjU0MDYxMg==&ampmid=&ampidx=1&ampsn=78f6b8dbdcc59&ampscene=19#wechat_redirect', img: '2.z0./1.jpg', title: '如何手制一份秋意的茶？' }, { url: 'http://mp./s?__biz=MzAxNjU0MDYxMg==&ampmid=&ampidx=1&ampsn=29ef02aff6aec92bfb46c1&ampscene=19#wechat_redirect', img: '2.z0./2.jpg', title: '茶包VS原叶茶' }, { url: 'http://mp./s?__biz=MzAxNjU0MDYxMg==&ampmid=&ampidx=1&ampsn=2b2108784fccc254d28c&ampscene=19#wechat_redirect', img: '2.z0./3.jpg', title: '播下茶籽，明春可发芽？' }] } } } &
&template&
&group title="default format: YYYY-MM-DD"&
&datetime :value.sync="value1" @on-change="change" title="Birthday"&&/datetime&
&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 title="Placeholder"&
&datetime :value.sync="value3" format="YYYY-MM-DD" placeholder="Please select" @on-change="change" title="start time"&&/datetime&
&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 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&
&/template&
import { Datetime, Group } from 'vux/src/components'
export default {
components: {
value1: '',
value2: '',
value3: '',
value4: '',
value5: ''
methods: {
change (value) {
console.log('change', value)
title="Default"&
title="message" placeholder="I'm placeholder"&&
title="不显示清除按钮"&
title="message" placeholder="I'm placeholder" :show-clear="false" autocapitalize="characters"&&
title="set is-type=china-name"&
title="姓名" name="username" placeholder="请输入姓名" is-type="china-name"&&
title="set keyboard=number and is-type=china-mobile"&
title="手机号码" name="mobile" placeholder="请输入手机号码" keyboard="number" is-type="china-mobile"&&
title="set is-type=email"&
title="邮箱" name="email" placeholder="请输入邮箱地址" is-type="email"&&
title="set min=2 and max=5"&
title="2-5个字符" placeholder="" :min="2" :max="5"&&
title="确认输入"&
title="请输入6位数字" type="text" placeholder="" :value.sync="password" :min="6" :max="6" @on-change="change"&&
title="请确认6位数字" type="text" placeholder="" :equal-with="password"&&
title="验证码" class="weui_cells_form"&
title="验证码" class="weui_vcode"&
slot="right" src="http://weui.github.io/weui/images/vcode.jpg"&
title="发送验证码" class="weui_vcode"&
slot="right" type="primary"&发送验证码&
title="check if value is valid when required===true"&
title="message" placeholder="I'm placeholder" v-ref:input&&
title="get valid value" :value="'$valid value:' + $refs.input.valid"&&
title="check if value is valid when required===false"&
title="message" placeholder="I'm placeholder" :required="false" v-ref:input02&&
title="get valid value" :value="'$valid value:' + $refs.input02.valid"&&
& 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) } } } &
scoped& .weui_cell_ft .weui_btn { margin-left: 5px; vertical-align: middle; display: inline-block; } &
单个计数器
&template&
&group title="Default"&
&x-number name="number" title="Number"&&/x-number&
&group title="listen to change events"&
&x-number name="listen" title="Number" :value="0" :min="0" @on-change="change"&&/x-number&
&group title="set width=100"&
&x-number title="Number" :width="100"&&/x-number&
&group title="set step=0.5"&
&x-number title="Number" :step="0.5"&&/x-number&
&group title="set value=1, min=-5 and max=8"&
&x-number title="Number" :min="-5" :max="8" :value="1"&&/x-number&
&group title="fillable = false"&
&x-number :value="10" title="Number" :fillable="false"&&/x-number&
&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&
&/template&
import { Group, XNumber, Switch } from 'vux/src/components'
export default {
components: {
methods: {
change (val) {
console.log('change', val)
图文组合列表
title="switch the type"&
title="type" :value.sync="type" :options="['1', '2', '3']"&&
header="图文组合列表" :footer="footer" :list="list" :type="type"&&
& import { Panel, Group, Radio } from 'vux/src/components' export default { components: { Panel, Group, Radio }, data () { return { type: '1', list: [{ src: '/60x60/3cc51f/ffffff', title: '标题一', desc: '由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。', url: '/component/cell' }, { src: '/60x60/3cc51f/ffffff', title: '标题二', desc: '由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。', url: { path: '/component/radio', replace: false } }], footer: { title: '查看更多', url: 'http://vux.li' } } } } &
我来说两句
友情链接：}