vux pullup to pulltorefreshlayout 怎么去掉
点击联系发帖人
时间：2017-10-18 06:08
1886人阅读
vue.js（42）
简单平分：水平布局和垂直布局
&code class=&hljs xml has-numbering& style=&display: padding: 0 background: color: box-sizing: border- font-family: &Source Code Pro&,font-size: white-space: border-radius: 0 word-wrap:&&&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&template&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&÷r&/span&&&/span&Horizontal&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&/&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&÷r&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&flexbox&/span& &span class=&hljs-attribute& style=&box-sizing: border- color: rgb(102, 0, 102);&&style&/span&=&span class=&hljs-value& style=&box-sizing: border- color: rgb(0, 136, 0);&&&height:40&&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&flexbox-item&/span&&&/span&&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&div&/span& &span class=&hljs-attribute& style=&box-sizing: border- color: rgb(102, 0, 102);&&class&/span&=&span class=&hljs-value& style=&box-sizing: border- color: rgb(0, 136, 0);&&&flex-demo&&/span&&&/span&1&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&/&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&div&/span&&&/span&&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&/&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&flexbox-item&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&flexbox-item&/span&&&/span&&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&div&/span& &span class=&hljs-attribute& style=&box-sizing: border- color: rgb(102, 0, 102);&&class&/span&=&span class=&hljs-value& style=&box-sizing: border- color: rgb(0, 136, 0);&&&flex-demo&&/span&&&/span&2&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&/&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&div&/span&&&/span&&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&/&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&flexbox-item&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&flexbox-item&/span&&&/span&&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&div&/span& &span class=&hljs-attribute& style=&box-sizing: border- color: rgb(102, 0, 102);&&class&/span&=&span class=&hljs-value& style=&box-sizing: border- color: rgb(0, 136, 0);&&&flex-demo&&/span&&&/span&3&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&/&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&div&/span&&&/span&&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&/&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&flexbox-item&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&/&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&flexbox&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&÷r&/span&&&/span&Vertical&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&/&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&÷r&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&flexbox&/span& &span class=&hljs-attribute& style=&box-sizing: border- color: rgb(102, 0, 102);&&orient&/span&=&span class=&hljs-value& style=&box-sizing: border- color: rgb(0, 136, 0);&&&vertical&&/span& &span class=&hljs-attribute& style=&box-sizing: border- color: rgb(102, 0, 102);&&:margin-left&/span&=&span class=&hljs-value& style=&box-sizing: border- color: rgb(0, 136, 0);&&0&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&flexbox-item&/span&&&/span&&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&div&/span& &span class=&hljs-attribute& style=&box-sizing: border- color: rgb(102, 0, 102);&&class&/span&=&span class=&hljs-value& style=&box-sizing: border- color: rgb(0, 136, 0);&&&flex-demo&&/span& &span class=&hljs-attribute& style=&box-sizing: border- color: rgb(102, 0, 102);&&style&/span&=&span class=&hljs-value& style=&box-sizing: border- color: rgb(0, 136, 0);&&&margin-left:0&&/span&&&/span&1&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&/&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&div&/span&&&/span&&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&/&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&flexbox-item&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&flexbox-item&/span&&&/span&&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&div&/span& &span class=&hljs-attribute& style=&box-sizing: border- color: rgb(102, 0, 102);&&class&/span&=&span class=&hljs-value& style=&box-sizing: border- color: rgb(0, 136, 0);&&&flex-demo&&/span& &span class=&hljs-attribute& style=&box-sizing: border- color: rgb(102, 0, 102);&&style&/span&=&span class=&hljs-value& style=&box-sizing: border- color: rgb(0, 136, 0);&&&margin-left:0&&/span&&&/span&2&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&/&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&div&/span&&&/span&&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&/&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&flexbox-item&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&flexbox-item&/span&&&/span&&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&div&/span& &span class=&hljs-attribute& style=&box-sizing: border- color: rgb(102, 0, 102);&&class&/span&=&span class=&hljs-value& style=&box-sizing: border- color: rgb(0, 136, 0);&&&flex-demo&&/span& &span class=&hljs-attribute& style=&box-sizing: border- color: rgb(102, 0, 102);&&style&/span&=&span class=&hljs-value& style=&box-sizing: border- color: rgb(0, 136, 0);&&&margin-left:0&&/span&&&/span&3&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&/&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&div&/span&&&/span&&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&/&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&flexbox-item&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&/&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&flexbox&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&/&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&template&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&script&/span&&&/span&&span class=&javascript& style=&box-sizing: border-&&
&span class=&hljs-comment& style=&color: rgb(136, 0, 0); box-sizing: border-&&//引入组件&/span&
import {Divider,FlexboxItem,Flexbox} from &span class=&hljs-string& style=&color: rgb(0, 136, 0); box-sizing: border-&&'vux/src/components'&/span&
&span class=&hljs-comment& style=&color: rgb(136, 0, 0); box-sizing: border-&&//创造构造器&/span&
export &span class=&hljs-keyword& style=&color: rgb(0, 0, 136); box-sizing: border-&&default&/span& {
components: {
Divider,FlexboxItem,Flexbox
&span class=&hljs-comment& style=&color: rgb(136, 0, 0); box-sizing: border-&&/*创造构造器的老版本的写法，编译的时候会报错，执行没有问题。
var MyComponent = Vue.extend{
components: {
Divider,FlexboxItem,Flexbox
}*/&/span&
&/span&&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&/&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&script&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&style&/span&&&/span&&span class=&css& style=&box-sizing: border-&&
&span class=&hljs-class& style=&box-sizing: border- color: rgb(155, 112, 63);&&.flex-demo&/span& &span class=&hljs-rules& style=&box-sizing: border-&&{
&span class=&hljs-rule& style=&box-sizing: border-&&&span class=&hljs-attribute& style=&box-sizing: border-&&text-align&/span&:&span class=&hljs-value& style=&box-sizing: border- color: rgb(0, 102, 102);&& center&/span&&/span&;
&span class=&hljs-comment& style=&color: rgb(136, 0, 0); box-sizing: border-&&/*文本居中显示*/&/span&
&span class=&hljs-rule& style=&box-sizing: border-&&&span class=&hljs-attribute& style=&box-sizing: border-&&color&/span&:&span class=&hljs-value& style=&box-sizing: border- color: rgb(0, 102, 102);&& &span class=&hljs-hexcolor& style=&box-sizing: border-&&#EEE&/span&&/span&&/span&;
&span class=&hljs-rule& style=&box-sizing: border-&&&span class=&hljs-attribute& style=&box-sizing: border-&&background-color&/span&:&span class=&hljs-value& style=&box-sizing: border- color: rgb(0, 102, 102);&& &span class=&hljs-hexcolor& style=&box-sizing: border-&MFF&/span&&/span&&/span&;
&span class=&hljs-rule& style=&box-sizing: border-&&&span class=&hljs-attribute& style=&box-sizing: border-&&margin-bottom&/span&:&span class=&hljs-value& style=&box-sizing: border- color: rgb(0, 102, 102);&& &span class=&hljs-number& style=&box-sizing: border-&&16&/span&px&/span&&/span&;
&span class=&hljs-rule& style=&box-sizing: border-&&&span class=&hljs-attribute& style=&box-sizing: border-&&border-radius&/span&:&span class=&hljs-value& style=&box-sizing: border- color: rgb(0, 102, 102);&& &span class=&hljs-number& style=&box-sizing: border-&&6&/span&px&/span&&/span&; &span class=&hljs-comment& style=&color: rgb(136, 0, 0); box-sizing: border-&&/*按钮的圆角弧度*/&/span&
&span class=&hljs-rule& style=&box-sizing: border-&&&span class=&hljs-attribute& style=&box-sizing: border-&&-webkit-background-clip&/span&:&span class=&hljs-value& style=&box-sizing: border- color: rgb(0, 102, 102);&& padding-box&/span&&/span&;
&span class=&hljs-rule& style=&box-sizing: border-&&}&/span&&/span&
&/span&&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&/&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&style&/span&&&/span&&/code&&ul class=&pre-numbering& style=&box-sizing: border- position: width: 50 background-color: rgb(238, 238, 238); top: 0 left: 0 margin: 0 padding: 6px 0px 40 border-right: 1px solid rgb(221, 221, 221); list-style: text-align:&&&li style=&box-sizing: border- padding: 0px 5&&1&/li&&li style=&box-sizing: border- padding: 0px 5&&2&/li&&li style=&box-sizing: border- padding: 0px 5&&3&/li&&li style=&box-sizing: border- padding: 0px 5&&4&/li&&li style=&box-sizing: border- padding: 0px 5&&5&/li&&li style=&box-sizing: border- padding: 0px 5&&6&/li&&li style=&box-sizing: border- padding: 0px 5&&7&/li&&li style=&box-sizing: border- padding: 0px 5&&8&/li&&li style=&box-sizing: border- padding: 0px 5&&9&/li&&li style=&box-sizing: border- padding: 0px 5&&10&/li&&li style=&box-sizing: border- padding: 0px 5&&11&/li&&li style=&box-sizing: border- padding: 0px 5&&12&/li&&li style=&box-sizing: border- padding: 0px 5&&13&/li&&li style=&box-sizing: border- padding: 0px 5&&14&/li&&li style=&box-sizing: border- padding: 0px 5&&15&/li&&li style=&box-sizing: border- padding: 0px 5&&16&/li&&li style=&box-sizing: border- padding: 0px 5&&17&/li&&li style=&box-sizing: border- padding: 0px 5&&18&/li&&li style=&box-sizing: border- padding: 0px 5&&19&/li&&li style=&box-sizing: border- padding: 0px 5&&20&/li&&li style=&box-sizing: border- padding: 0px 5&&21&/li&&li style=&box-sizing: border- padding: 0px 5&&22&/li&&li style=&box-sizing: border- padding: 0px 5&&23&/li&&li style=&box-sizing: border- padding: 0px 5&&24&/li&&li style=&box-sizing: border- padding: 0px 5&&25&/li&&li style=&box-sizing: border- padding: 0px 5&&26&/li&&li style=&box-sizing: border- padding: 0px 5&&27&/li&&li style=&box-sizing: border- padding: 0px 5&&28&/li&&li style=&box-sizing: border- padding: 0px 5&&29&/li&&li style=&box-sizing: border- padding: 0px 5&&30&/li&&li style=&box-sizing: border- padding: 0px 5&&31&/li&&li style=&box-sizing: border- padding: 0px 5&&32&/li&&li style=&box-sizing: border- padding: 0px 5&&33&/li&&li style=&box-sizing: border- padding: 0px 5&&34&/li&&li style=&box-sizing: border- padding: 0px 5&&35&/li&&li style=&box-sizing: border- padding: 0px 5&&36&/li&&li style=&box-sizing: border- padding: 0px 5&&37&/li&&li style=&box-sizing: border- padding: 0px 5&&38&/li&&li style=&box-sizing: border- padding: 0px 5&&39&/li&&li style=&box-sizing: border- padding: 0px 5&&40&/li&&li style=&box-sizing: border- padding: 0px 5&&41&/li&&li style=&box-sizing: border- padding: 0px 5&&42&/li&&/ul&&ul class=&pre-numbering& style=&box-sizing: border- position: width: 50 background-color: rgb(238, 238, 238); top: 0 left: 0 margin: 0 padding: 6px 0px 40 border-right: 1px solid rgb(221, 221, 221); list-style: text-align:&&&li style=&box-sizing: border- padding: 0px 5&&1&/li&&li style=&box-sizing: border- padding: 0px 5&&2&/li&&li style=&box-sizing: border- padding: 0px 5&&3&/li&&li style=&box-sizing: border- padding: 0px 5&&4&/li&&li style=&box-sizing: border- padding: 0px 5&&5&/li&&li style=&box-sizing: border- padding: 0px 5&&6&/li&&li style=&box-sizing: border- padding: 0px 5&&7&/li&&li style=&box-sizing: border- padding: 0px 5&&8&/li&&li style=&box-sizing: border- padding: 0px 5&&9&/li&&li style=&box-sizing: border- padding: 0px 5&&10&/li&&li style=&box-sizing: border- padding: 0px 5&&11&/li&&li style=&box-sizing: border- padding: 0px 5&&12&/li&&li style=&box-sizing: border- padding: 0px 5&&13&/li&&li style=&box-sizing: border- padding: 0px 5&&14&/li&&li style=&box-sizing: border- padding: 0px 5&&15&/li&&li style=&box-sizing: border- padding: 0px 5&&16&/li&&li style=&box-sizing: border- padding: 0px 5&&17&/li&&li style=&box-sizing: border- padding: 0px 5&&18&/li&&li style=&box-sizing: border- padding: 0px 5&&19&/li&&li style=&box-sizing: border- padding: 0px 5&&20&/li&&li style=&box-sizing: border- padding: 0px 5&&21&/li&&li style=&box-sizing: border- padding: 0px 5&&22&/li&&li style=&box-sizing: border- padding: 0px 5&&23&/li&&li style=&box-sizing: border- padding: 0px 5&&24&/li&&li style=&box-sizing: border- padding: 0px 5&&25&/li&&li style=&box-sizing: border- padding: 0px 5&&26&/li&&li style=&box-sizing: border- padding: 0px 5&&27&/li&&li style=&box-sizing: border- padding: 0px 5&&28&/li&&li style=&box-sizing: border- padding: 0px 5&&29&/li&&li style=&box-sizing: border- padding: 0px 5&&30&/li&&li style=&box-sizing: border- padding: 0px 5&&31&/li&&li style=&box-sizing: border- padding: 0px 5&&32&/li&&li style=&box-sizing: border- padding: 0px 5&&33&/li&&li style=&box-sizing: border- padding: 0px 5&&34&/li&&li style=&box-sizing: border- padding: 0px 5&&35&/li&&li style=&box-sizing: border- padding: 0px 5&&36&/li&&li style=&box-sizing: border- padding: 0px 5&&37&/li&&li style=&box-sizing: border- padding: 0px 5&&38&/li&&li style=&box-sizing: border- padding: 0px 5&&39&/li&&li style=&box-sizing: border- padding: 0px 5&&40&/li&&li style=&box-sizing: border- padding: 0px 5&&41&/li&&li style=&box-sizing: border- padding: 0px 5&&42&/li&&/ul&
&code class=&hljs xml has-numbering& style=&display: padding: 0 background: color: box-sizing: border- font-family: &Source Code Pro&,font-size: white-space: border-radius: 0 word-wrap:&&&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&template&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&flexbox&/span& &span class=&hljs-attribute& style=&box-sizing: border- color: rgb(102, 0, 102);&&:margin-left&/span&=&span class=&hljs-value& style=&box-sizing: border- color: rgb(0, 136, 0);&&0&/span& &span class=&hljs-attribute& style=&box-sizing: border- color: rgb(102, 0, 102);&&style&/span&=&span class=&hljs-value& style=&box-sizing: border- color: rgb(0, 136, 0);&&&height: 200 background-color: #&&/span& &span class=&hljs-attribute& style=&box-sizing: border- color: rgb(102, 0, 102);&&class&/span&=&span class=&hljs-value& style=&box-sizing: border- color: rgb(0, 136, 0);&&&vux-1px-tb vux-1px-l vux-1px-r&&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&flexbox-item&/span& &span class=&hljs-attribute& style=&box-sizing: border- color: rgb(102, 0, 102);&&class&/span&=&span class=&hljs-value& style=&box-sizing: border- color: rgb(0, 136, 0);&&&vux-1px-r&&/span& &span class=&hljs-attribute& style=&box-sizing: border- color: rgb(102, 0, 102);&&style&/span&=&span class=&hljs-value& style=&box-sizing: border- color: rgb(0, 136, 0);&&&height:200&&/span&&&/span&&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&/&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&flexbox-item&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&flexbox-item&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&flexbox&/span& &span class=&hljs-attribute& style=&box-sizing: border- color: rgb(102, 0, 102);&&orient&/span&=&span class=&hljs-value& style=&box-sizing: border- color: rgb(0, 136, 0);&&&vertical&&/span& &span class=&hljs-attribute& style=&box-sizing: border- color: rgb(102, 0, 102);&&:margin-left&/span&=&span class=&hljs-value& style=&box-sizing: border- color: rgb(0, 136, 0);&&0&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&flexbox-item&/span& &span class=&hljs-attribute& style=&box-sizing: border- color: rgb(102, 0, 102);&&class&/span&=&span class=&hljs-value& style=&box-sizing: border- color: rgb(0, 136, 0);&&&vux-1px-b&&/span&&&/span&&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&/&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&flexbox-item&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&flexbox-item&/span& &span class=&hljs-attribute& style=&box-sizing: border- color: rgb(102, 0, 102);&&style&/span&=&span class=&hljs-value& style=&box-sizing: border- color: rgb(0, 136, 0);&&&height: 100&&/span&&&/span&&span class=&hljs-comment& style=&color: rgb(136, 0, 0); box-sizing: border-&&&!--height: 100% doesnot work here--&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&flexbox&/span& &span class=&hljs-attribute& style=&box-sizing: border- color: rgb(102, 0, 102);&&:margin-left&/span&=&span class=&hljs-value& style=&box-sizing: border- color: rgb(0, 136, 0);&&0&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&flexbox-item&/span& &span class=&hljs-attribute& style=&box-sizing: border- color: rgb(102, 0, 102);&&class&/span&=&span class=&hljs-value& style=&box-sizing: border- color: rgb(0, 136, 0);&&&vux-1px-r&&/span&&&/span&&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&/&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&flexbox-item&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&flexbox-item&/span&&&/span&&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&/&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&flexbox-item&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&/&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&flexbox&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&/&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&flexbox-item&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&/&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&flexbox&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&/&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&flexbox-item&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&/&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&flexbox&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&/&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&template&/span&&&/span&&/code&&ul class=&pre-numbering& style=&box-sizing: border- position: width: 50 background-color: rgb(238, 238, 238); top: 0 left: 0 margin: 0 padding: 6px 0px 40 border-right: 1px solid rgb(221, 221, 221); list-style: text-align:&&&li style=&box-sizing: border- padding: 0px 5&&1&/li&&li style=&box-sizing: border- padding: 0px 5&&2&/li&&li style=&box-sizing: border- padding: 0px 5&&3&/li&&li style=&box-sizing: border- padding: 0px 5&&4&/li&&li style=&box-sizing: border- padding: 0px 5&&5&/li&&li style=&box-sizing: border- padding: 0px 5&&6&/li&&li style=&box-sizing: border- padding: 0px 5&&7&/li&&li style=&box-sizing: border- padding: 0px 5&&8&/li&&li style=&box-sizing: border- padding: 0px 5&&9&/li&&li style=&box-sizing: border- padding: 0px 5&&10&/li&&li style=&box-sizing: border- padding: 0px 5&&11&/li&&li style=&box-sizing: border- padding: 0px 5&&12&/li&&li style=&box-sizing: border- padding: 0px 5&&13&/li&&li style=&box-sizing: border- padding: 0px 5&&14&/li&&li style=&box-sizing: border- padding: 0px 5&&15&/li&&li style=&box-sizing: border- padding: 0px 5&&16&/li&&/ul&&ul class=&pre-numbering& style=&box-sizing: border- position: width: 50 background-color: rgb(238, 238, 238); top: 0 left: 0 margin: 0 padding: 6px 0px 40 border-right: 1px solid rgb(221, 221, 221); list-style: text-align:&&&li style=&box-sizing: border- padding: 0px 5&&1&/li&&li style=&box-sizing: border- padding: 0px 5&&2&/li&&li style=&box-sizing: border- padding: 0px 5&&3&/li&&li style=&box-sizing: border- padding: 0px 5&&4&/li&&li style=&box-sizing: border- padding: 0px 5&&5&/li&&li style=&box-sizing: border- padding: 0px 5&&6&/li&&li style=&box-sizing: border- padding: 0px 5&&7&/li&&li style=&box-sizing: border- padding: 0px 5&&8&/li&&li style=&box-sizing: border- padding: 0px 5&&9&/li&&li style=&box-sizing: border- padding: 0px 5&&10&/li&&li style=&box-sizing: border- padding: 0px 5&&11&/li&&li style=&box-sizing: border- padding: 0px 5&&12&/li&&li style=&box-sizing: border- padding: 0px 5&&13&/li&&li style=&box-sizing: border- padding: 0px 5&&14&/li&&li style=&box-sizing: border- padding: 0px 5&&15&/li&&li style=&box-sizing: border- padding: 0px 5&&16&/li&&/ul&
scrollbarX
横向滚动条
scrollbarY
垂直方向滚动条
是否有边缘回弹
use-pulldown
是否使用下拉组件
use-pullup
是否使用上拉组件
pulldown-config
下拉组件配置
pullup-config
上拉组件配置
pulldown-status
双向绑定，当需要自定义下拉刷新行为时配置
pullup-status
双向绑定，当需要自定义上拉行为时配置
reset方法，重新渲染，因为scroller并不知道内部内容是否变化，因此需要手动取得ref进行reset, 并且需要在$nextTick中执行。
&code class=&hljs coffeescript has-numbering& style=&display: padding: 0 background: color: box-sizing: border- font-family: &Source Code Pro&,font-size: white-space: border-radius: 0 word-wrap:&&&span class=&hljs-keyword& style=&color: rgb(0, 0, 136); box-sizing: border-&&this&/span&.$nextTick&span class=&hljs-function& style=&box-sizing: border-&&&span class=&hljs-params& style=&color: rgb(102, 0, 102); box-sizing: border-&&(() =& {
&span class=&hljs-keyword& style=&color: rgb(0, 0, 136); box-sizing: border-&&this&/span&.$refs.scroller.reset()
})&/span&&/span&&/code&&ul class=&pre-numbering& style=&box-sizing: border- position: width: 50 background-color: rgb(238, 238, 238); top: 0 left: 0 margin: 0 padding: 6px 0px 40 border-right: 1px solid rgb(221, 221, 221); list-style: text-align:&&&li style=&box-sizing: border- padding: 0px 5&&1&/li&&li style=&box-sizing: border- padding: 0px 5&&2&/li&&li style=&box-sizing: border- padding: 0px 5&&3&/li&&/ul&&ul class=&pre-numbering& style=&box-sizing: border- position: width: 50 background-color: rgb(238, 238, 238); top: 0 left: 0 margin: 0 padding: 6px 0px 40 border-right: 1px solid rgb(221, 221, 221); list-style: text-align:&&&li style=&box-sizing: border- padding: 0px 5&&1&/li&&li style=&box-sizing: border- padding: 0px 5&&2&/li&&li style=&box-sizing: border- padding: 0px 5&&3&/li&&/ul&
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”可以设置切换的颜色
&code class=&hljs xml has-numbering& style=&display: padding: 0 background: color: box-sizing: border- font-family: &Source Code Pro&,font-size: white-space: border-radius: 0 word-wrap:&&&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&template&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&tab&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&tab-item&/span& &span class=&hljs-attribute& style=&box-sizing: border- color: rgb(102, 0, 102);&&:selected&/span&=&span class=&hljs-value& style=&box-sizing: border- color: rgb(0, 136, 0);&&&demo1 === '已发货'&&/span& @&span class=&hljs-attribute& style=&box-sizing: border- color: rgb(102, 0, 102);&&click&/span&=&span class=&hljs-value& style=&box-sizing: border- color: rgb(0, 136, 0);&&&demo1 = '已发货'&&/span&&&/span&已发货&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&/&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&tab-item&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&tab-item&/span& &span class=&hljs-attribute& style=&box-sizing: border- color: rgb(102, 0, 102);&&:selected&/span&=&span class=&hljs-value& style=&box-sizing: border- color: rgb(0, 136, 0);&&&demo1 === '未发货'&&/span& @&span class=&hljs-attribute& style=&box-sizing: border- color: rgb(102, 0, 102);&&click&/span&=&span class=&hljs-value& style=&box-sizing: border- color: rgb(0, 136, 0);&&&demo1 = '未发货'&&/span&&&/span&未发货&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&/&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&tab-item&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&tab-item&/span& &span class=&hljs-attribute& style=&box-sizing: border- color: rgb(102, 0, 102);&&:selected&/span&=&span class=&hljs-value& style=&box-sizing: border- color: rgb(0, 136, 0);&&&demo1 === '全部订单'&&/span& @&span class=&hljs-attribute& style=&box-sizing: border- color: rgb(102, 0, 102);&&click&/span&=&span class=&hljs-value& style=&box-sizing: border- color: rgb(0, 136, 0);&&&demo1 = '全部订单'&&/span&&&/span&全部订单&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&/&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&tab-item&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&tab-item&/span& &span class=&hljs-attribute& style=&box-sizing: border- color: rgb(102, 0, 102);&&:selected&/span&=&span class=&hljs-value& style=&box-sizing: border- color: rgb(0, 136, 0);&&&demo1 === '1'&&/span& @&span class=&hljs-attribute& style=&box-sizing: border- color: rgb(102, 0, 102);&&click&/span&=&span class=&hljs-value& style=&box-sizing: border- color: rgb(0, 136, 0);&&&demo1&&/span& = '&span class=&hljs-attribute& style=&box-sizing: border- color: rgb(102, 0, 102);&&6666&/span&'&&/span&6666&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&/&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&tab-item&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&/&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&tab&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&/&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&template&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&script&/span&&&/span&&span class=&javascript& style=&box-sizing: border-&&
&span class=&hljs-comment& style=&color: rgb(136, 0, 0); box-sizing: border-&&//引入组件&/span&
import {Tab, TabItem} from &span class=&hljs-string& style=&color: rgb(0, 136, 0); box-sizing: border-&&'vux/src/components'&/span&
&span class=&hljs-comment& style=&color: rgb(136, 0, 0); box-sizing: border-&&//创造构造器&/span&
export &span class=&hljs-keyword& style=&color: rgb(0, 0, 136); box-sizing: border-&&default&/span& {
components: {
Tab, TabItem
&span class=&hljs-keyword& style=&color: rgb(0, 0, 136); box-sizing: border-&&return&/span& {
demo1: &span class=&hljs-string& style=&color: rgb(0, 136, 0); box-sizing: border-&&'1'&/span&
&span class=&hljs-comment& style=&color: rgb(136, 0, 0); box-sizing: border-&&/*创造构造器的老版本的写法，编译的时候会报错，执行没有问题。
var MyComponent = Vue.extend{
components: {
Divider,FlexboxItem,Flexbox
}*/&/span&
&/span&&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&/&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&script&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&style&/span&&&/span&&span class=&css& style=&box-sizing: border-&&
&span class=&hljs-class& style=&box-sizing: border- color: rgb(155, 112, 63);&&.flex-demo&/span& &span class=&hljs-rules& style=&box-sizing: border-&&{
&span class=&hljs-rule& style=&box-sizing: border-&&&span class=&hljs-attribute& style=&box-sizing: border-&&text-align&/span&:&span class=&hljs-value& style=&box-sizing: border- color: rgb(0, 102, 102);&& center&/span&&/span&;
&span class=&hljs-rule& style=&box-sizing: border-&&&span class=&hljs-attribute& style=&box-sizing: border-&&color&/span&:&span class=&hljs-value& style=&box-sizing: border- color: rgb(0, 102, 102);&& &span class=&hljs-hexcolor& style=&box-sizing: border-&&#fff&/span&&/span&&/span&;
&span class=&hljs-rule& style=&box-sizing: border-&&&span class=&hljs-attribute& style=&box-sizing: border-&&background-color&/span&:&span class=&hljs-value& style=&box-sizing: border- color: rgb(0, 102, 102);&& &span class=&hljs-hexcolor& style=&box-sizing: border-&MFF&/span&&/span&&/span&;
&span class=&hljs-rule& style=&box-sizing: border-&&&span class=&hljs-attribute& style=&box-sizing: border-&&margin-bottom&/span&:&span class=&hljs-value& style=&box-sizing: border- color: rgb(0, 102, 102);&& &span class=&hljs-number& style=&box-sizing: border-&&8&/span&px&/span&&/span&;
&span class=&hljs-rule& style=&box-sizing: border-&&&span class=&hljs-attribute& style=&box-sizing: border-&&border-radius&/span&:&span class=&hljs-value& style=&box-sizing: border- color: rgb(0, 102, 102);&& &span class=&hljs-number& style=&box-sizing: border-&&4&/span&px&/span&&/span&;
&span class=&hljs-rule& style=&box-sizing: border-&&&span class=&hljs-attribute& style=&box-sizing: border-&&-webkit-background-clip&/span&:&span class=&hljs-value& style=&box-sizing: border- color: rgb(0, 102, 102);&& padding-box&/span&&/span&;
&span class=&hljs-rule& style=&box-sizing: border-&&}&/span&&/span&
&/span&&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&/&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&style&/span&&&/span&&/code&&ul class=&pre-numbering& style=&box-sizing: border- position: width: 50 background-color: rgb(238, 238, 238); top: 0 left: 0 margin: 0 padding: 6px 0px 40 border-right: 1px solid rgb(221, 221, 221); list-style: text-align:&&&li style=&box-sizing: border- padding: 0px 5&&1&/li&&li style=&box-sizing: border- padding: 0px 5&&2&/li&&li style=&box-sizing: border- padding: 0px 5&&3&/li&&li style=&box-sizing: border- padding: 0px 5&&4&/li&&li style=&box-sizing: border- padding: 0px 5&&5&/li&&li style=&box-sizing: border- padding: 0px 5&&6&/li&&li style=&box-sizing: border- padding: 0px 5&&7&/li&&li style=&box-sizing: border- padding: 0px 5&&8&/li&&li style=&box-sizing: border- padding: 0px 5&&9&/li&&li style=&box-sizing: border- padding: 0px 5&&10&/li&&li style=&box-sizing: border- padding: 0px 5&&11&/li&&li style=&box-sizing: border- padding: 0px 5&&12&/li&&li style=&box-sizing: border- padding: 0px 5&&13&/li&&li style=&box-sizing: border- padding: 0px 5&&14&/li&&li style=&box-sizing: border- padding: 0px 5&&15&/li&&li style=&box-sizing: border- padding: 0px 5&&16&/li&&li style=&box-sizing: border- padding: 0px 5&&17&/li&&li style=&box-sizing: border- padding: 0px 5&&18&/li&&li style=&box-sizing: border- padding: 0px 5&&19&/li&&li style=&box-sizing: border- padding: 0px 5&&20&/li&&li style=&box-sizing: border- padding: 0px 5&&21&/li&&li style=&box-sizing: border- padding: 0px 5&&22&/li&&li style=&box-sizing: border- padding: 0px 5&&23&/li&&li style=&box-sizing: border- padding: 0px 5&&24&/li&&li style=&box-sizing: border- padding: 0px 5&&25&/li&&li style=&box-sizing: border- padding: 0px 5&&26&/li&&li style=&box-sizing: border- padding: 0px 5&&27&/li&&li style=&box-sizing: border- padding: 0px 5&&28&/li&&li style=&box-sizing: border- padding: 0px 5&&29&/li&&li style=&box-sizing: border- padding: 0px 5&&30&/li&&li style=&box-sizing: border- padding: 0px 5&&31&/li&&li style=&box-sizing: border- padding: 0px 5&&32&/li&&li style=&box-sizing: border- padding: 0px 5&&33&/li&&li style=&box-sizing: border- padding: 0px 5&&34&/li&&li style=&box-sizing: border- padding: 0px 5&&35&/li&&li style=&box-sizing: border- padding: 0px 5&&36&/li&&li style=&box-sizing: border- padding: 0px 5&&37&/li&&li style=&box-sizing: border- padding: 0px 5&&38&/li&&li style=&box-sizing: border- padding: 0px 5&&39&/li&&li style=&box-sizing: border- padding: 0px 5&&40&/li&&li style=&box-sizing: border- padding: 0px 5&&41&/li&&li style=&box-sizing: border- padding: 0px 5&&42&/li&&/ul&&ul class=&pre-numbering& style=&box-sizing: border- position: width: 50 background-color: rgb(238, 238, 238); top: 0 left: 0 margin: 0 padding: 6px 0px 40 border-right: 1px solid rgb(221, 221, 221); list-style: text-align:&&&li style=&box-sizing: border- padding: 0px 5&&1&/li&&li style=&box-sizing: border- padding: 0px 5&&2&/li&&li style=&box-sizing: border- padding: 0px 5&&3&/li&&li style=&box-sizing: border- padding: 0px 5&&4&/li&&li style=&box-sizing: border- padding: 0px 5&&5&/li&&li style=&box-sizing: border- padding: 0px 5&&6&/li&&li style=&box-sizing: border- padding: 0px 5&&7&/li&&li style=&box-sizing: border- padding: 0px 5&&8&/li&&li style=&box-sizing: border- padding: 0px 5&&9&/li&&li style=&box-sizing: border- padding: 0px 5&&10&/li&&li style=&box-sizing: border- padding: 0px 5&&11&/li&&li style=&box-sizing: border- padding: 0px 5&&12&/li&&li style=&box-sizing: border- padding: 0px 5&&13&/li&&li style=&box-sizing: border- padding: 0px 5&&14&/li&&li style=&box-sizing: border- padding: 0px 5&&15&/li&&li style=&box-sizing: border- padding: 0px 5&&16&/li&&li style=&box-sizing: border- padding: 0px 5&&17&/li&&li style=&box-sizing: border- padding: 0px 5&&18&/li&&li style=&box-sizing: border- padding: 0px 5&&19&/li&&li style=&box-sizing: border- padding: 0px 5&&20&/li&&li style=&box-sizing: border- padding: 0px 5&&21&/li&&li style=&box-sizing: border- padding: 0px 5&&22&/li&&li style=&box-sizing: border- padding: 0px 5&&23&/li&&li style=&box-sizing: border- padding: 0px 5&&24&/li&&li style=&box-sizing: border- padding: 0px 5&&25&/li&&li style=&box-sizing: border- padding: 0px 5&&26&/li&&li style=&box-sizing: border- padding: 0px 5&&27&/li&&li style=&box-sizing: border- padding: 0px 5&&28&/li&&li style=&box-sizing: border- padding: 0px 5&&29&/li&&li style=&box-sizing: border- padding: 0px 5&&30&/li&&li style=&box-sizing: border- padding: 0px 5&&31&/li&&li style=&box-sizing: border- padding: 0px 5&&32&/li&&li style=&box-sizing: border- padding: 0px 5&&33&/li&&li style=&box-sizing: border- padding: 0px 5&&34&/li&&li style=&box-sizing: border- padding: 0px 5&&35&/li&&li style=&box-sizing: border- padding: 0px 5&&36&/li&&li style=&box-sizing: border- padding: 0px 5&&37&/li&&li style=&box-sizing: border- padding: 0px 5&&38&/li&&li style=&box-sizing: border- padding: 0px 5&&39&/li&&li style=&box-sizing: border- padding: 0px 5&&40&/li&&li style=&box-sizing: border- padding: 0px 5&&41&/li&&li style=&box-sizing: border- padding: 0px 5&&42&/li&&/ul&
更简洁的粟子
&code class=&hljs livecodeserver has-numbering& style=&display: padding: 0 background: color: box-sizing: border- font-family: &Source Code Pro&,font-size: white-space: border-radius: 0 word-wrap:&&&&span class=&hljs-constant& style=&box-sizing: border-&&tab&/span& :&span class=&hljs-built_in& style=&color: rgb(102, 0, 102); box-sizing: border-&&line&/span&-width=&span class=&hljs-string& style=&color: rgb(0, 136, 0); box-sizing: border-&&&2&&/span& active-color=&span class=&hljs-string& style=&color: rgb(0, 136, 0); box-sizing: border-&&&#fc378c&&/span&&
&&span class=&hljs-constant& style=&box-sizing: border-&&tab&/span&-&span class=&hljs-keyword& style=&color: rgb(0, 0, 136); box-sizing: border-&&item&/span& :selected=&span class=&hljs-string& style=&color: rgb(0, 136, 0); box-sizing: border-&&&demo2 === item&&/span& v-&span class=&hljs-keyword& style=&color: rgb(0, 0, 136); box-sizing: border-&&for&/span&=&span class=&hljs-string& style=&color: rgb(0, 136, 0); box-sizing: border-&&&item in list2&&/span& @click=&span class=&hljs-string& style=&color: rgb(0, 136, 0); box-sizing: border-&&&demo2 = item&&/span&&&/&span class=&hljs-constant& style=&box-sizing: border-&&tab&/span&-&span class=&hljs-keyword& style=&color: rgb(0, 0, 136); box-sizing: border-&&item&/span&&
&/&span class=&hljs-constant& style=&box-sizing: border-&&tab&/span&&
export default {
&span class=&hljs-constant& style=&box-sizing: border-&&return&/span& {
demo2: &span class=&hljs-string& style=&color: rgb(0, 136, 0); box-sizing: border-&&'美食'&/span&,
list2: [&span class=&hljs-string& style=&color: rgb(0, 136, 0); box-sizing: border-&&'精选'&/span&, &span class=&hljs-string& style=&color: rgb(0, 136, 0); box-sizing: border-&&'美食'&/span&, &span class=&hljs-string& style=&color: rgb(0, 136, 0); box-sizing: border-&&'电影'&/span&, &span class=&hljs-string& style=&color: rgb(0, 136, 0); box-sizing: border-&&'酒店'&/span&, &span class=&hljs-string& style=&color: rgb(0, 136, 0); box-sizing: border-&&'外卖'&/span&]
}&/code&&ul class=&pre-numbering& style=&box-sizing: border- position: width: 50 background-color: rgb(238, 238, 238); top: 0 left: 0 margin: 0 padding: 6px 0px 40 border-right: 1px solid rgb(221, 221, 221); list-style: text-align:&&&li style=&box-sizing: border- padding: 0px 5&&1&/li&&li style=&box-sizing: border- padding: 0px 5&&2&/li&&li style=&box-sizing: border- padding: 0px 5&&3&/li&&li style=&box-sizing: border- padding: 0px 5&&4&/li&&li style=&box-sizing: border- padding: 0px 5&&5&/li&&li style=&box-sizing: border- padding: 0px 5&&6&/li&&li style=&box-sizing: border- padding: 0px 5&&7&/li&&li style=&box-sizing: border- padding: 0px 5&&8&/li&&li style=&box-sizing: border- padding: 0px 5&&9&/li&&li style=&box-sizing: border- padding: 0px 5&&10&/li&&li style=&box-sizing: border- padding: 0px 5&&11&/li&&li style=&box-sizing: border- padding: 0px 5&&12&/li&&li style=&box-sizing: border- padding: 0px 5&&13&/li&&/ul&&ul class=&pre-numbering& style=&box-sizing: border- position: width: 50 background-color: rgb(238, 238, 238); top: 0 left: 0 margin: 0 padding: 6px 0px 40 border-right: 1px solid rgb(221, 221, 221); list-style: text-align:&&&li style=&box-sizing: border- padding: 0px 5&&1&/li&&li style=&box-sizing: border- padding: 0px 5&&2&/li&&li style=&box-sizing: border- padding: 0px 5&&3&/li&&li style=&box-sizing: border- padding: 0px 5&&4&/li&&li style=&box-sizing: border- padding: 0px 5&&5&/li&&li style=&box-sizing: border- padding: 0px 5&&6&/li&&li style=&box-sizing: border- padding: 0px 5&&7&/li&&li style=&box-sizing: border- padding: 0px 5&&8&/li&&li style=&box-sizing: border- padding: 0px 5&&9&/li&&li style=&box-sizing: border- padding: 0px 5&&10&/li&&li style=&box-sizing: border- padding: 0px 5&&11&/li&&li style=&box-sizing: border- padding: 0px 5&&12&/li&&li style=&box-sizing: border- padding: 0px 5&&13&/li&&/ul&
Popup弹出层
默认值
Popup，需要双向绑定 Boolean
弹出层高度
String auto
如果希望弹出层铺满整个屏幕，则可设置height=100%
on-first-show 第一次出现时，用于需要在第一次进行异步数据获取或者必要的UI渲染（如Popup内有Scroller）
&code class=&hljs xml has-numbering& style=&display: padding: 0 background: color: box-sizing: border- font-family: &Source Code Pro&,font-size: white-space: border-radius: 0 word-wrap:&&&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&template&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&div&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&group&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&switch&/span& &span class=&hljs-attribute& style=&box-sizing: border- color: rgb(102, 0, 102);&&title&/span&=&span class=&hljs-value& style=&box-sizing: border- color: rgb(0, 136, 0);&&&WIFI&&/span& &span class=&hljs-attribute& style=&box-sizing: border- color: rgb(102, 0, 102);&&:value.sync&/span&=&span class=&hljs-value& style=&box-sizing: border- color: rgb(0, 136, 0);&&&show&&/span&&&/span&&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&/&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&switch&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&switch&/span& &span class=&hljs-attribute& style=&box-sizing: border- color: rgb(102, 0, 102);&&title&/span&=&span class=&hljs-value& style=&box-sizing: border- color: rgb(0, 136, 0);&&&Full popup&&/span& &span class=&hljs-attribute& style=&box-sizing: border- color: rgb(102, 0, 102);&&:value.sync&/span&=&span class=&hljs-value& style=&box-sizing: border- color: rgb(0, 136, 0);&&&show1&&/span&&&/span&&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&/&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&switch&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&/&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&group&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&popup&/span& &span class=&hljs-attribute& style=&box-sizing: border- color: rgb(102, 0, 102);&&:show.sync&/span&=&span class=&hljs-value& style=&box-sizing: border- color: rgb(0, 136, 0);&&&show&&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&div&/span& &span class=&hljs-attribute& style=&box-sizing: border- color: rgb(102, 0, 102);&&class&/span&=&span class=&hljs-value& style=&box-sizing: border- color: rgb(0, 136, 0);&&&popup0&&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&group&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&switch&/span& &span class=&hljs-attribute& style=&box-sizing: border- color: rgb(102, 0, 102);&&title&/span&=&span class=&hljs-value& style=&box-sizing: border- color: rgb(0, 136, 0);&&&Another Switcher&&/span& &span class=&hljs-attribute& style=&box-sizing: border- color: rgb(102, 0, 102);&&:value.sync&/span&=&span class=&hljs-value& style=&box-sizing: border- color: rgb(0, 136, 0);&&&show&&/span&&&/span&&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&/&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&switch&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&/&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&group&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&/&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&div&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&/&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&popup&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&popup&/span& &span class=&hljs-attribute& style=&box-sizing: border- color: rgb(102, 0, 102);&&:show.sync&/span&=&span class=&hljs-value& style=&box-sizing: border- color: rgb(0, 136, 0);&&&show1&&/span& &span class=&hljs-attribute& style=&box-sizing: border- color: rgb(102, 0, 102);&&height&/span&=&span class=&hljs-value& style=&box-sizing: border- color: rgb(0, 136, 0);&&&80%&&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&div&/span& &span class=&hljs-attribute& style=&box-sizing: border- color: rgb(102, 0, 102);&&class&/span&=&span class=&hljs-value& style=&box-sizing: border- color: rgb(0, 136, 0);&&&popup1&&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&group&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&switch&/span& &span class=&hljs-attribute& style=&box-sizing: border- color: rgb(102, 0, 102);&&title&/span&=&span class=&hljs-value& style=&box-sizing: border- color: rgb(0, 136, 0);&&&Another Switcher&&/span& &span class=&hljs-attribute& style=&box-sizing: border- color: rgb(102, 0, 102);&&:value.sync&/span&=&span class=&hljs-value& style=&box-sizing: border- color: rgb(0, 136, 0);&&&show1&&/span&&&/span&&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&/&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&switch&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&/&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&group&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&/&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&div&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&/&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&popup&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&/&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&div&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&/&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&template&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&script&/span&&&/span&&span class=&javascript& style=&box-sizing: border-&&
&span class=&hljs-comment& style=&color: rgb(136, 0, 0); box-sizing: border-&&//引入组件&/span&
} from &span class=&hljs-string& style=&color: rgb(0, 136, 0); box-sizing: border-&&'vux/src/components'&/span&
&span class=&hljs-comment& style=&color: rgb(136, 0, 0); box-sizing: border-&&//创造构造器&/span&
export &span class=&hljs-keyword& style=&color: rgb(0, 0, 136); box-sizing: border-&&default&/span& {
components:{
Group,Switch,Popup
&span class=&hljs-keyword& style=&color: rgb(0, 0, 136); box-sizing: border-&&return&/span& {
show: &span class=&hljs-literal& style=&color: rgb(0, 102, 102); box-sizing: border-&&false&/span&,
show1: &span class=&hljs-literal& style=&color: rgb(0, 102, 102); box-sizing: border-&&false&/span&
&span class=&hljs-comment& style=&color: rgb(136, 0, 0); box-sizing: border-&&/*创造构造器的老版本的写法，编译的时候会报错，执行没有问题。
var MyComponent = Vue.extend{
components: {
Divider,FlexboxItem,Flexbox
}*/&/span&
&/span&&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&/&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&script&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&style&/span&&&/span&&span class=&css& style=&box-sizing: border-&&
&span class=&hljs-class& style=&box-sizing: border- color: rgb(155, 112, 63);&&.popup0&/span& &span class=&hljs-rules& style=&box-sizing: border-&&{
&span class=&hljs-rule& style=&box-sizing: border-&&&span class=&hljs-attribute& style=&box-sizing: border-&&padding-bottom&/span&:&span class=&hljs-value& style=&box-sizing: border- color: rgb(0, 102, 102);&&&span class=&hljs-number& style=&box-sizing: border-&&15&/span&px&/span&&/span&;
&span class=&hljs-rule& style=&box-sizing: border-&&&span class=&hljs-attribute& style=&box-sizing: border-&&height&/span&:&span class=&hljs-value& style=&box-sizing: border- color: rgb(0, 102, 102);&&&span class=&hljs-number& style=&box-sizing: border-&&200&/span&px&/span&&/span&;
&span class=&hljs-rule& style=&box-sizing: border-&&}&/span&&/span&
&span class=&hljs-class& style=&box-sizing: border- color: rgb(155, 112, 63);&&.popup1&/span& &span class=&hljs-rules& style=&box-sizing: border-&&{
&span class=&hljs-rule& style=&box-sizing: border-&&&span class=&hljs-attribute& style=&box-sizing: border-&&width&/span&:&span class=&hljs-value& style=&box-sizing: border- color: rgb(0, 102, 102);&&&span class=&hljs-number& style=&box-sizing: border-&&100&/span&%&/span&&/span&;
&span class=&hljs-rule& style=&box-sizing: border-&&&span class=&hljs-attribute& style=&box-sizing: border-&&height&/span&:&span class=&hljs-value& style=&box-sizing: border- color: rgb(0, 102, 102);&&&span class=&hljs-number& style=&box-sizing: border-&&100&/span&%&/span&&/span&;
&span class=&hljs-rule& style=&box-sizing: border-&&}&/span&&/span&
&/span&&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&/&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&style&/span&&&/span&
&/code&&ul class=&pre-numbering& style=&box-sizing: border- position: width: 50 background-color: rgb(238, 238, 238); top: 0 left: 0 margin: 0 padding: 6px 0px 40 border-right: 1px solid rgb(221, 221, 221); list-style: text-align:&&&li style=&box-sizing: border- padding: 0px 5&&1&/li&&li style=&box-sizing: border- padding: 0px 5&&2&/li&&li style=&box-sizing: border- padding: 0px 5&&3&/li&&li style=&box-sizing: border- padding: 0px 5&&4&/li&&li style=&box-sizing: border- padding: 0px 5&&5&/li&&li style=&box-sizing: border- padding: 0px 5&&6&/li&&li style=&box-sizing: border- padding: 0px 5&&7&/li&&li style=&box-sizing: border- padding: 0px 5&&8&/li&&li style=&box-sizing: border- padding: 0px 5&&9&/li&&li style=&box-sizing: border- padding: 0px 5&&10&/li&&li style=&box-sizing: border- padding: 0px 5&&11&/li&&li style=&box-sizing: border- padding: 0px 5&&12&/li&&li style=&box-sizing: border- padding: 0px 5&&13&/li&&li style=&box-sizing: border- padding: 0px 5&&14&/li&&li style=&box-sizing: border- padding: 0px 5&&15&/li&&li style=&box-sizing: border- padding: 0px 5&&16&/li&&li style=&box-sizing: border- padding: 0px 5&&17&/li&&li style=&box-sizing: border- padding: 0px 5&&18&/li&&li style=&box-sizing: border- padding: 0px 5&&19&/li&&li style=&box-sizing: border- padding: 0px 5&&20&/li&&li style=&box-sizing: border- padding: 0px 5&&21&/li&&li style=&box-sizing: border- padding: 0px 5&&22&/li&&li style=&box-sizing: border- padding: 0px 5&&23&/li&&li style=&box-sizing: border- padding: 0px 5&&24&/li&&li style=&box-sizing: border- padding: 0px 5&&25&/li&&li style=&box-sizing: border- padding: 0px 5&&26&/li&&li style=&box-sizing: border- padding: 0px 5&&27&/li&&li style=&box-sizing: border- padding: 0px 5&&28&/li&&li style=&box-sizing: border- padding: 0px 5&&29&/li&&li style=&box-sizing: border- padding: 0px 5&&30&/li&&li style=&box-sizing: border- padding: 0px 5&&31&/li&&li style=&box-sizing: border- padding: 0px 5&&32&/li&&li style=&box-sizing: border- padding: 0px 5&&33&/li&&li style=&box-sizing: border- padding: 0px 5&&34&/li&&li style=&box-sizing: border- padding: 0px 5&&35&/li&&li style=&box-sizing: border- padding: 0px 5&&36&/li&&li style=&box-sizing: border- padding: 0px 5&&37&/li&&li style=&box-sizing: border- padding: 0px 5&&38&/li&&li style=&box-sizing: border- padding: 0px 5&&39&/li&&li style=&box-sizing: border- padding: 0px 5&&40&/li&&li style=&box-sizing: border- padding: 0px 5&&41&/li&&li style=&box-sizing: border- padding: 0px 5&&42&/li&&li style=&box-sizing: border- padding: 0px 5&&43&/li&&li style=&box-sizing: border- padding: 0px 5&&44&/li&&li style=&box-sizing: border- padding: 0px 5&&45&/li&&li style=&box-sizing: border- padding: 0px 5&&46&/li&&li style=&box-sizing: border- padding: 0px 5&&47&/li&&li style=&box-sizing: border- padding: 0px 5&&48&/li&&li style=&box-sizing: border- padding: 0px 5&&49&/li&&li style=&box-sizing: border- padding: 0px 5&&50&/li&&li style=&box-sizing: border- padding: 0px 5&&51&/li&&li style=&box-sizing: border- padding: 0px 5&&52&/li&&li style=&box-sizing: border- padding: 0px 5&&53&/li&&li style=&box-sizing: border- padding: 0px 5&&54&/li&&li style=&box-sizing: border- padding: 0px 5&&55&/li&&li style=&box-sizing: border- padding: 0px 5&&56&/li&&li style=&box-sizing: border- padding: 0px 5&&57&/li&&li style=&box-sizing: border- padding: 0px 5&&58&/li&&li style=&box-sizing: border- padding: 0px 5&&59&/li&&li style=&box-sizing: border- padding: 0px 5&&60&/li&&li style=&box-sizing: border- padding: 0px 5&&61&/li&&/ul&&ul class=&pre-numbering& style=&box-sizing: border- position: width: 50 background-color: rgb(238, 238, 238); top: 0 left: 0 margin: 0 padding: 6px 0px 40 border-right: 1px solid rgb(221, 221, 221); list-style: text-align:&&&li style=&box-sizing: border- padding: 0px 5&&1&/li&&li style=&box-sizing: border- padding: 0px 5&&2&/li&&li style=&box-sizing: border- padding: 0px 5&&3&/li&&li style=&box-sizing: border- padding: 0px 5&&4&/li&&li style=&box-sizing: border- padding: 0px 5&&5&/li&&li style=&box-sizing: border- padding: 0px 5&&6&/li&&li style=&box-sizing: border- padding: 0px 5&&7&/li&&li style=&box-sizing: border- padding: 0px 5&&8&/li&&li style=&box-sizing: border- padding: 0px 5&&9&/li&&li style=&box-sizing: border- padding: 0px 5&&10&/li&&li style=&box-sizing: border- padding: 0px 5&&11&/li&&li style=&box-sizing: border- padding: 0px 5&&12&/li&&li style=&box-sizing: border- padding: 0px 5&&13&/li&&li style=&box-sizing: border- padding: 0px 5&&14&/li&&li style=&box-sizing: border- padding: 0px 5&&15&/li&&li style=&box-sizing: border- padding: 0px 5&&16&/li&&li style=&box-sizing: border- padding: 0px 5&&17&/li&&li style=&box-sizing: border- padding: 0px 5&&18&/li&&li style=&box-sizing: border- padding: 0px 5&&19&/li&&li style=&box-sizing: border- padding: 0px 5&&20&/li&&li style=&box-sizing: border- padding: 0px 5&&21&/li&&li style=&box-sizing: border- padding: 0px 5&&22&/li&&li style=&box-sizing: border- padding: 0px 5&&23&/li&&li style=&box-sizing: border- padding: 0px 5&&24&/li&&li style=&box-sizing: border- padding: 0px 5&&25&/li&&li style=&box-sizing: border- padding: 0px 5&&26&/li&&li style=&box-sizing: border- padding: 0px 5&&27&/li&&li style=&box-sizing: border- padding: 0px 5&&28&/li&&li style=&box-sizing: border- padding: 0px 5&&29&/li&&li style=&box-sizing: border- padding: 0px 5&&30&/li&&li style=&box-sizing: border- padding: 0px 5&&31&/li&&li style=&box-sizing: border- padding: 0px 5&&32&/li&&li style=&box-sizing: border- padding: 0px 5&&33&/li&&li style=&box-sizing: border- padding: 0px 5&&34&/li&&li style=&box-sizing: border- padding: 0px 5&&35&/li&&li style=&box-sizing: border- padding: 0px 5&&36&/li&&li style=&box-sizing: border- padding: 0px 5&&37&/li&&li style=&box-sizing: border- padding: 0px 5&&38&/li&&li style=&box-sizing: border- padding: 0px 5&&39&/li&&li style=&box-sizing: border- padding: 0px 5&&40&/li&&li style=&box-sizing: border- padding: 0px 5&&41&/li&&li style=&box-sizing: border- padding: 0px 5&&42&/li&&li style=&box-sizing: border- padding: 0px 5&&43&/li&&li style=&box-sizing: border- padding: 0px 5&&44&/li&&li style=&box-sizing: border- padding: 0px 5&&45&/li&&li style=&box-sizing: border- padding: 0px 5&&46&/li&&li style=&box-sizing: border- padding: 0px 5&&47&/li&&li style=&box-sizing: border- padding: 0px 5&&48&/li&&li style=&box-sizing: border- padding: 0px 5&&49&/li&&li style=&box-sizing: border- padding: 0px 5&&50&/li&&li style=&box-sizing: border- padding: 0px 5&&51&/li&&li style=&box-sizing: border- padding: 0px 5&&52&/li&&li style=&box-sizing: border- padding: 0px 5&&53&/li&&li style=&box-sizing: border- padding: 0px 5&&54&/li&&li style=&box-sizing: border- padding: 0px 5&&55&/li&&li style=&box-sizing: border- padding: 0px 5&&56&/li&&li style=&box-sizing: border- padding: 0px 5&&57&/li&&li style=&box-sizing: border- padding: 0px 5&&58&/li&&li style=&box-sizing: border- padding: 0px 5&&59&/li&&li style=&box-sizing: border- padding: 0px 5&&60&/li&&li style=&box-sizing: border- padding: 0px 5&&61&/li&&/ul&
Sticky 自动固定在顶部
&code class=&hljs xml has-numbering& style=&display: padding: 0 background: color: box-sizing: border- font-family: &Source Code Pro&,font-size: white-space: border-radius: 0 word-wrap:&&&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&template&/span&&&/span&
&span class=&hljs-comment& style=&color: rgb(136, 0, 0); box-sizing: border-&&&!-- &br v-for=&i in number&&中的number是调节高度的 --&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&br&/span& &span class=&hljs-attribute& style=&box-sizing: border- color: rgb(102, 0, 102);&&v-for&/span&=&span class=&hljs-value& style=&box-sizing: border- color: rgb(0, 136, 0);&&&i in 5&&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&sticky&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&tab&/span& &span class=&hljs-attribute& style=&box-sizing: border- color: rgb(102, 0, 102);&&:line-width&/span&=&span class=&hljs-value& style=&box-sizing: border- color: rgb(0, 136, 0);&&1&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&tab-item&/span& &span class=&hljs-attribute& style=&box-sizing: border- color: rgb(102, 0, 102);&&selected&/span&&&/span&正在正映&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&/&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&tab-item&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&tab-item&/span&&&/span&即将上映&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&/&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&tab-item&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&/&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&tab&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&/&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&sticky&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&br&/span& &span class=&hljs-attribute& style=&box-sizing: border- color: rgb(102, 0, 102);&&v-for&/span&=&span class=&hljs-value& style=&box-sizing: border- color: rgb(0, 136, 0);&&&i in 50&&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&/&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&template&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&script&/span&&&/span&&span class=&javascript& style=&box-sizing: border-&&
&span class=&hljs-comment& style=&color: rgb(136, 0, 0); box-sizing: border-&&//引入组件&/span&
} from &span class=&hljs-string& style=&color: rgb(}
vue.js（42）
简单平分：水平布局和垂直布局
&code class=&hljs xml has-numbering& style=&display: padding: 0 background: color: box-sizing: border- font-family: &Source Code Pro&,font-size: white-space: border-radius: 0 word-wrap:&&&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&template&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&÷r&/span&&&/span&Horizontal&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&/&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&÷r&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&flexbox&/span& &span class=&hljs-attribute& style=&box-sizing: border- color: rgb(102, 0, 102);&&style&/span&=&span class=&hljs-value& style=&box-sizing: border- color: rgb(0, 136, 0);&&&height:40&&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&flexbox-item&/span&&&/span&&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&div&/span& &span class=&hljs-attribute& style=&box-sizing: border- color: rgb(102, 0, 102);&&class&/span&=&span class=&hljs-value& style=&box-sizing: border- color: rgb(0, 136, 0);&&&flex-demo&&/span&&&/span&1&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&/&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&div&/span&&&/span&&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&/&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&flexbox-item&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&flexbox-item&/span&&&/span&&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&div&/span& &span class=&hljs-attribute& style=&box-sizing: border- color: rgb(102, 0, 102);&&class&/span&=&span class=&hljs-value& style=&box-sizing: border- color: rgb(0, 136, 0);&&&flex-demo&&/span&&&/span&2&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&/&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&div&/span&&&/span&&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&/&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&flexbox-item&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&flexbox-item&/span&&&/span&&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&div&/span& &span class=&hljs-attribute& style=&box-sizing: border- color: rgb(102, 0, 102);&&class&/span&=&span class=&hljs-value& style=&box-sizing: border- color: rgb(0, 136, 0);&&&flex-demo&&/span&&&/span&3&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&/&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&div&/span&&&/span&&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&/&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&flexbox-item&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&/&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&flexbox&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&÷r&/span&&&/span&Vertical&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&/&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&÷r&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&flexbox&/span& &span class=&hljs-attribute& style=&box-sizing: border- color: rgb(102, 0, 102);&&orient&/span&=&span class=&hljs-value& style=&box-sizing: border- color: rgb(0, 136, 0);&&&vertical&&/span& &span class=&hljs-attribute& style=&box-sizing: border- color: rgb(102, 0, 102);&&:margin-left&/span&=&span class=&hljs-value& style=&box-sizing: border- color: rgb(0, 136, 0);&&0&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&flexbox-item&/span&&&/span&&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&div&/span& &span class=&hljs-attribute& style=&box-sizing: border- color: rgb(102, 0, 102);&&class&/span&=&span class=&hljs-value& style=&box-sizing: border- color: rgb(0, 136, 0);&&&flex-demo&&/span& &span class=&hljs-attribute& style=&box-sizing: border- color: rgb(102, 0, 102);&&style&/span&=&span class=&hljs-value& style=&box-sizing: border- color: rgb(0, 136, 0);&&&margin-left:0&&/span&&&/span&1&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&/&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&div&/span&&&/span&&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&/&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&flexbox-item&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&flexbox-item&/span&&&/span&&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&div&/span& &span class=&hljs-attribute& style=&box-sizing: border- color: rgb(102, 0, 102);&&class&/span&=&span class=&hljs-value& style=&box-sizing: border- color: rgb(0, 136, 0);&&&flex-demo&&/span& &span class=&hljs-attribute& style=&box-sizing: border- color: rgb(102, 0, 102);&&style&/span&=&span class=&hljs-value& style=&box-sizing: border- color: rgb(0, 136, 0);&&&margin-left:0&&/span&&&/span&2&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&/&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&div&/span&&&/span&&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&/&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&flexbox-item&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&flexbox-item&/span&&&/span&&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&div&/span& &span class=&hljs-attribute& style=&box-sizing: border- color: rgb(102, 0, 102);&&class&/span&=&span class=&hljs-value& style=&box-sizing: border- color: rgb(0, 136, 0);&&&flex-demo&&/span& &span class=&hljs-attribute& style=&box-sizing: border- color: rgb(102, 0, 102);&&style&/span&=&span class=&hljs-value& style=&box-sizing: border- color: rgb(0, 136, 0);&&&margin-left:0&&/span&&&/span&3&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&/&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&div&/span&&&/span&&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&/&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&flexbox-item&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&/&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&flexbox&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&/&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&template&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&script&/span&&&/span&&span class=&javascript& style=&box-sizing: border-&&
&span class=&hljs-comment& style=&color: rgb(136, 0, 0); box-sizing: border-&&//引入组件&/span&
import {Divider,FlexboxItem,Flexbox} from &span class=&hljs-string& style=&color: rgb(0, 136, 0); box-sizing: border-&&'vux/src/components'&/span&
&span class=&hljs-comment& style=&color: rgb(136, 0, 0); box-sizing: border-&&//创造构造器&/span&
export &span class=&hljs-keyword& style=&color: rgb(0, 0, 136); box-sizing: border-&&default&/span& {
components: {
Divider,FlexboxItem,Flexbox
&span class=&hljs-comment& style=&color: rgb(136, 0, 0); box-sizing: border-&&/*创造构造器的老版本的写法，编译的时候会报错，执行没有问题。
var MyComponent = Vue.extend{
components: {
Divider,FlexboxItem,Flexbox
}*/&/span&
&/span&&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&/&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&script&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&style&/span&&&/span&&span class=&css& style=&box-sizing: border-&&
&span class=&hljs-class& style=&box-sizing: border- color: rgb(155, 112, 63);&&.flex-demo&/span& &span class=&hljs-rules& style=&box-sizing: border-&&{
&span class=&hljs-rule& style=&box-sizing: border-&&&span class=&hljs-attribute& style=&box-sizing: border-&&text-align&/span&:&span class=&hljs-value& style=&box-sizing: border- color: rgb(0, 102, 102);&& center&/span&&/span&;
&span class=&hljs-comment& style=&color: rgb(136, 0, 0); box-sizing: border-&&/*文本居中显示*/&/span&
&span class=&hljs-rule& style=&box-sizing: border-&&&span class=&hljs-attribute& style=&box-sizing: border-&&color&/span&:&span class=&hljs-value& style=&box-sizing: border- color: rgb(0, 102, 102);&& &span class=&hljs-hexcolor& style=&box-sizing: border-&&#EEE&/span&&/span&&/span&;
&span class=&hljs-rule& style=&box-sizing: border-&&&span class=&hljs-attribute& style=&box-sizing: border-&&background-color&/span&:&span class=&hljs-value& style=&box-sizing: border- color: rgb(0, 102, 102);&& &span class=&hljs-hexcolor& style=&box-sizing: border-&MFF&/span&&/span&&/span&;
&span class=&hljs-rule& style=&box-sizing: border-&&&span class=&hljs-attribute& style=&box-sizing: border-&&margin-bottom&/span&:&span class=&hljs-value& style=&box-sizing: border- color: rgb(0, 102, 102);&& &span class=&hljs-number& style=&box-sizing: border-&&16&/span&px&/span&&/span&;
&span class=&hljs-rule& style=&box-sizing: border-&&&span class=&hljs-attribute& style=&box-sizing: border-&&border-radius&/span&:&span class=&hljs-value& style=&box-sizing: border- color: rgb(0, 102, 102);&& &span class=&hljs-number& style=&box-sizing: border-&&6&/span&px&/span&&/span&; &span class=&hljs-comment& style=&color: rgb(136, 0, 0); box-sizing: border-&&/*按钮的圆角弧度*/&/span&
&span class=&hljs-rule& style=&box-sizing: border-&&&span class=&hljs-attribute& style=&box-sizing: border-&&-webkit-background-clip&/span&:&span class=&hljs-value& style=&box-sizing: border- color: rgb(0, 102, 102);&& padding-box&/span&&/span&;
&span class=&hljs-rule& style=&box-sizing: border-&&}&/span&&/span&
&/span&&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&/&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&style&/span&&&/span&&/code&&ul class=&pre-numbering& style=&box-sizing: border- position: width: 50 background-color: rgb(238, 238, 238); top: 0 left: 0 margin: 0 padding: 6px 0px 40 border-right: 1px solid rgb(221, 221, 221); list-style: text-align:&&&li style=&box-sizing: border- padding: 0px 5&&1&/li&&li style=&box-sizing: border- padding: 0px 5&&2&/li&&li style=&box-sizing: border- padding: 0px 5&&3&/li&&li style=&box-sizing: border- padding: 0px 5&&4&/li&&li style=&box-sizing: border- padding: 0px 5&&5&/li&&li style=&box-sizing: border- padding: 0px 5&&6&/li&&li style=&box-sizing: border- padding: 0px 5&&7&/li&&li style=&box-sizing: border- padding: 0px 5&&8&/li&&li style=&box-sizing: border- padding: 0px 5&&9&/li&&li style=&box-sizing: border- padding: 0px 5&&10&/li&&li style=&box-sizing: border- padding: 0px 5&&11&/li&&li style=&box-sizing: border- padding: 0px 5&&12&/li&&li style=&box-sizing: border- padding: 0px 5&&13&/li&&li style=&box-sizing: border- padding: 0px 5&&14&/li&&li style=&box-sizing: border- padding: 0px 5&&15&/li&&li style=&box-sizing: border- padding: 0px 5&&16&/li&&li style=&box-sizing: border- padding: 0px 5&&17&/li&&li style=&box-sizing: border- padding: 0px 5&&18&/li&&li style=&box-sizing: border- padding: 0px 5&&19&/li&&li style=&box-sizing: border- padding: 0px 5&&20&/li&&li style=&box-sizing: border- padding: 0px 5&&21&/li&&li style=&box-sizing: border- padding: 0px 5&&22&/li&&li style=&box-sizing: border- padding: 0px 5&&23&/li&&li style=&box-sizing: border- padding: 0px 5&&24&/li&&li style=&box-sizing: border- padding: 0px 5&&25&/li&&li style=&box-sizing: border- padding: 0px 5&&26&/li&&li style=&box-sizing: border- padding: 0px 5&&27&/li&&li style=&box-sizing: border- padding: 0px 5&&28&/li&&li style=&box-sizing: border- padding: 0px 5&&29&/li&&li style=&box-sizing: border- padding: 0px 5&&30&/li&&li style=&box-sizing: border- padding: 0px 5&&31&/li&&li style=&box-sizing: border- padding: 0px 5&&32&/li&&li style=&box-sizing: border- padding: 0px 5&&33&/li&&li style=&box-sizing: border- padding: 0px 5&&34&/li&&li style=&box-sizing: border- padding: 0px 5&&35&/li&&li style=&box-sizing: border- padding: 0px 5&&36&/li&&li style=&box-sizing: border- padding: 0px 5&&37&/li&&li style=&box-sizing: border- padding: 0px 5&&38&/li&&li style=&box-sizing: border- padding: 0px 5&&39&/li&&li style=&box-sizing: border- padding: 0px 5&&40&/li&&li style=&box-sizing: border- padding: 0px 5&&41&/li&&li style=&box-sizing: border- padding: 0px 5&&42&/li&&/ul&&ul class=&pre-numbering& style=&box-sizing: border- position: width: 50 background-color: rgb(238, 238, 238); top: 0 left: 0 margin: 0 padding: 6px 0px 40 border-right: 1px solid rgb(221, 221, 221); list-style: text-align:&&&li style=&box-sizing: border- padding: 0px 5&&1&/li&&li style=&box-sizing: border- padding: 0px 5&&2&/li&&li style=&box-sizing: border- padding: 0px 5&&3&/li&&li style=&box-sizing: border- padding: 0px 5&&4&/li&&li style=&box-sizing: border- padding: 0px 5&&5&/li&&li style=&box-sizing: border- padding: 0px 5&&6&/li&&li style=&box-sizing: border- padding: 0px 5&&7&/li&&li style=&box-sizing: border- padding: 0px 5&&8&/li&&li style=&box-sizing: border- padding: 0px 5&&9&/li&&li style=&box-sizing: border- padding: 0px 5&&10&/li&&li style=&box-sizing: border- padding: 0px 5&&11&/li&&li style=&box-sizing: border- padding: 0px 5&&12&/li&&li style=&box-sizing: border- padding: 0px 5&&13&/li&&li style=&box-sizing: border- padding: 0px 5&&14&/li&&li style=&box-sizing: border- padding: 0px 5&&15&/li&&li style=&box-sizing: border- padding: 0px 5&&16&/li&&li style=&box-sizing: border- padding: 0px 5&&17&/li&&li style=&box-sizing: border- padding: 0px 5&&18&/li&&li style=&box-sizing: border- padding: 0px 5&&19&/li&&li style=&box-sizing: border- padding: 0px 5&&20&/li&&li style=&box-sizing: border- padding: 0px 5&&21&/li&&li style=&box-sizing: border- padding: 0px 5&&22&/li&&li style=&box-sizing: border- padding: 0px 5&&23&/li&&li style=&box-sizing: border- padding: 0px 5&&24&/li&&li style=&box-sizing: border- padding: 0px 5&&25&/li&&li style=&box-sizing: border- padding: 0px 5&&26&/li&&li style=&box-sizing: border- padding: 0px 5&&27&/li&&li style=&box-sizing: border- padding: 0px 5&&28&/li&&li style=&box-sizing: border- padding: 0px 5&&29&/li&&li style=&box-sizing: border- padding: 0px 5&&30&/li&&li style=&box-sizing: border- padding: 0px 5&&31&/li&&li style=&box-sizing: border- padding: 0px 5&&32&/li&&li style=&box-sizing: border- padding: 0px 5&&33&/li&&li style=&box-sizing: border- padding: 0px 5&&34&/li&&li style=&box-sizing: border- padding: 0px 5&&35&/li&&li style=&box-sizing: border- padding: 0px 5&&36&/li&&li style=&box-sizing: border- padding: 0px 5&&37&/li&&li style=&box-sizing: border- padding: 0px 5&&38&/li&&li style=&box-sizing: border- padding: 0px 5&&39&/li&&li style=&box-sizing: border- padding: 0px 5&&40&/li&&li style=&box-sizing: border- padding: 0px 5&&41&/li&&li style=&box-sizing: border- padding: 0px 5&&42&/li&&/ul&
&code class=&hljs xml has-numbering& style=&display: padding: 0 background: color: box-sizing: border- font-family: &Source Code Pro&,font-size: white-space: border-radius: 0 word-wrap:&&&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&template&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&flexbox&/span& &span class=&hljs-attribute& style=&box-sizing: border- color: rgb(102, 0, 102);&&:margin-left&/span&=&span class=&hljs-value& style=&box-sizing: border- color: rgb(0, 136, 0);&&0&/span& &span class=&hljs-attribute& style=&box-sizing: border- color: rgb(102, 0, 102);&&style&/span&=&span class=&hljs-value& style=&box-sizing: border- color: rgb(0, 136, 0);&&&height: 200 background-color: #&&/span& &span class=&hljs-attribute& style=&box-sizing: border- color: rgb(102, 0, 102);&&class&/span&=&span class=&hljs-value& style=&box-sizing: border- color: rgb(0, 136, 0);&&&vux-1px-tb vux-1px-l vux-1px-r&&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&flexbox-item&/span& &span class=&hljs-attribute& style=&box-sizing: border- color: rgb(102, 0, 102);&&class&/span&=&span class=&hljs-value& style=&box-sizing: border- color: rgb(0, 136, 0);&&&vux-1px-r&&/span& &span class=&hljs-attribute& style=&box-sizing: border- color: rgb(102, 0, 102);&&style&/span&=&span class=&hljs-value& style=&box-sizing: border- color: rgb(0, 136, 0);&&&height:200&&/span&&&/span&&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&/&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&flexbox-item&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&flexbox-item&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&flexbox&/span& &span class=&hljs-attribute& style=&box-sizing: border- color: rgb(102, 0, 102);&&orient&/span&=&span class=&hljs-value& style=&box-sizing: border- color: rgb(0, 136, 0);&&&vertical&&/span& &span class=&hljs-attribute& style=&box-sizing: border- color: rgb(102, 0, 102);&&:margin-left&/span&=&span class=&hljs-value& style=&box-sizing: border- color: rgb(0, 136, 0);&&0&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&flexbox-item&/span& &span class=&hljs-attribute& style=&box-sizing: border- color: rgb(102, 0, 102);&&class&/span&=&span class=&hljs-value& style=&box-sizing: border- color: rgb(0, 136, 0);&&&vux-1px-b&&/span&&&/span&&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&/&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&flexbox-item&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&flexbox-item&/span& &span class=&hljs-attribute& style=&box-sizing: border- color: rgb(102, 0, 102);&&style&/span&=&span class=&hljs-value& style=&box-sizing: border- color: rgb(0, 136, 0);&&&height: 100&&/span&&&/span&&span class=&hljs-comment& style=&color: rgb(136, 0, 0); box-sizing: border-&&&!--height: 100% doesnot work here--&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&flexbox&/span& &span class=&hljs-attribute& style=&box-sizing: border- color: rgb(102, 0, 102);&&:margin-left&/span&=&span class=&hljs-value& style=&box-sizing: border- color: rgb(0, 136, 0);&&0&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&flexbox-item&/span& &span class=&hljs-attribute& style=&box-sizing: border- color: rgb(102, 0, 102);&&class&/span&=&span class=&hljs-value& style=&box-sizing: border- color: rgb(0, 136, 0);&&&vux-1px-r&&/span&&&/span&&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&/&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&flexbox-item&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&flexbox-item&/span&&&/span&&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&/&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&flexbox-item&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&/&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&flexbox&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&/&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&flexbox-item&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&/&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&flexbox&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&/&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&flexbox-item&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&/&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&flexbox&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&/&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&template&/span&&&/span&&/code&&ul class=&pre-numbering& style=&box-sizing: border- position: width: 50 background-color: rgb(238, 238, 238); top: 0 left: 0 margin: 0 padding: 6px 0px 40 border-right: 1px solid rgb(221, 221, 221); list-style: text-align:&&&li style=&box-sizing: border- padding: 0px 5&&1&/li&&li style=&box-sizing: border- padding: 0px 5&&2&/li&&li style=&box-sizing: border- padding: 0px 5&&3&/li&&li style=&box-sizing: border- padding: 0px 5&&4&/li&&li style=&box-sizing: border- padding: 0px 5&&5&/li&&li style=&box-sizing: border- padding: 0px 5&&6&/li&&li style=&box-sizing: border- padding: 0px 5&&7&/li&&li style=&box-sizing: border- padding: 0px 5&&8&/li&&li style=&box-sizing: border- padding: 0px 5&&9&/li&&li style=&box-sizing: border- padding: 0px 5&&10&/li&&li style=&box-sizing: border- padding: 0px 5&&11&/li&&li style=&box-sizing: border- padding: 0px 5&&12&/li&&li style=&box-sizing: border- padding: 0px 5&&13&/li&&li style=&box-sizing: border- padding: 0px 5&&14&/li&&li style=&box-sizing: border- padding: 0px 5&&15&/li&&li style=&box-sizing: border- padding: 0px 5&&16&/li&&/ul&&ul class=&pre-numbering& style=&box-sizing: border- position: width: 50 background-color: rgb(238, 238, 238); top: 0 left: 0 margin: 0 padding: 6px 0px 40 border-right: 1px solid rgb(221, 221, 221); list-style: text-align:&&&li style=&box-sizing: border- padding: 0px 5&&1&/li&&li style=&box-sizing: border- padding: 0px 5&&2&/li&&li style=&box-sizing: border- padding: 0px 5&&3&/li&&li style=&box-sizing: border- padding: 0px 5&&4&/li&&li style=&box-sizing: border- padding: 0px 5&&5&/li&&li style=&box-sizing: border- padding: 0px 5&&6&/li&&li style=&box-sizing: border- padding: 0px 5&&7&/li&&li style=&box-sizing: border- padding: 0px 5&&8&/li&&li style=&box-sizing: border- padding: 0px 5&&9&/li&&li style=&box-sizing: border- padding: 0px 5&&10&/li&&li style=&box-sizing: border- padding: 0px 5&&11&/li&&li style=&box-sizing: border- padding: 0px 5&&12&/li&&li style=&box-sizing: border- padding: 0px 5&&13&/li&&li style=&box-sizing: border- padding: 0px 5&&14&/li&&li style=&box-sizing: border- padding: 0px 5&&15&/li&&li style=&box-sizing: border- padding: 0px 5&&16&/li&&/ul&
scrollbarX
横向滚动条
scrollbarY
垂直方向滚动条
是否有边缘回弹
use-pulldown
是否使用下拉组件
use-pullup
是否使用上拉组件
pulldown-config
下拉组件配置
pullup-config
上拉组件配置
pulldown-status
双向绑定，当需要自定义下拉刷新行为时配置
pullup-status
双向绑定，当需要自定义上拉行为时配置
reset方法，重新渲染，因为scroller并不知道内部内容是否变化，因此需要手动取得ref进行reset, 并且需要在$nextTick中执行。
&code class=&hljs coffeescript has-numbering& style=&display: padding: 0 background: color: box-sizing: border- font-family: &Source Code Pro&,font-size: white-space: border-radius: 0 word-wrap:&&&span class=&hljs-keyword& style=&color: rgb(0, 0, 136); box-sizing: border-&&this&/span&.$nextTick&span class=&hljs-function& style=&box-sizing: border-&&&span class=&hljs-params& style=&color: rgb(102, 0, 102); box-sizing: border-&&(() =& {
&span class=&hljs-keyword& style=&color: rgb(0, 0, 136); box-sizing: border-&&this&/span&.$refs.scroller.reset()
})&/span&&/span&&/code&&ul class=&pre-numbering& style=&box-sizing: border- position: width: 50 background-color: rgb(238, 238, 238); top: 0 left: 0 margin: 0 padding: 6px 0px 40 border-right: 1px solid rgb(221, 221, 221); list-style: text-align:&&&li style=&box-sizing: border- padding: 0px 5&&1&/li&&li style=&box-sizing: border- padding: 0px 5&&2&/li&&li style=&box-sizing: border- padding: 0px 5&&3&/li&&/ul&&ul class=&pre-numbering& style=&box-sizing: border- position: width: 50 background-color: rgb(238, 238, 238); top: 0 left: 0 margin: 0 padding: 6px 0px 40 border-right: 1px solid rgb(221, 221, 221); list-style: text-align:&&&li style=&box-sizing: border- padding: 0px 5&&1&/li&&li style=&box-sizing: border- padding: 0px 5&&2&/li&&li style=&box-sizing: border- padding: 0px 5&&3&/li&&/ul&
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”可以设置切换的颜色
&code class=&hljs xml has-numbering& style=&display: padding: 0 background: color: box-sizing: border- font-family: &Source Code Pro&,font-size: white-space: border-radius: 0 word-wrap:&&&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&template&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&tab&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&tab-item&/span& &span class=&hljs-attribute& style=&box-sizing: border- color: rgb(102, 0, 102);&&:selected&/span&=&span class=&hljs-value& style=&box-sizing: border- color: rgb(0, 136, 0);&&&demo1 === '已发货'&&/span& @&span class=&hljs-attribute& style=&box-sizing: border- color: rgb(102, 0, 102);&&click&/span&=&span class=&hljs-value& style=&box-sizing: border- color: rgb(0, 136, 0);&&&demo1 = '已发货'&&/span&&&/span&已发货&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&/&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&tab-item&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&tab-item&/span& &span class=&hljs-attribute& style=&box-sizing: border- color: rgb(102, 0, 102);&&:selected&/span&=&span class=&hljs-value& style=&box-sizing: border- color: rgb(0, 136, 0);&&&demo1 === '未发货'&&/span& @&span class=&hljs-attribute& style=&box-sizing: border- color: rgb(102, 0, 102);&&click&/span&=&span class=&hljs-value& style=&box-sizing: border- color: rgb(0, 136, 0);&&&demo1 = '未发货'&&/span&&&/span&未发货&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&/&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&tab-item&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&tab-item&/span& &span class=&hljs-attribute& style=&box-sizing: border- color: rgb(102, 0, 102);&&:selected&/span&=&span class=&hljs-value& style=&box-sizing: border- color: rgb(0, 136, 0);&&&demo1 === '全部订单'&&/span& @&span class=&hljs-attribute& style=&box-sizing: border- color: rgb(102, 0, 102);&&click&/span&=&span class=&hljs-value& style=&box-sizing: border- color: rgb(0, 136, 0);&&&demo1 = '全部订单'&&/span&&&/span&全部订单&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&/&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&tab-item&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&tab-item&/span& &span class=&hljs-attribute& style=&box-sizing: border- color: rgb(102, 0, 102);&&:selected&/span&=&span class=&hljs-value& style=&box-sizing: border- color: rgb(0, 136, 0);&&&demo1 === '1'&&/span& @&span class=&hljs-attribute& style=&box-sizing: border- color: rgb(102, 0, 102);&&click&/span&=&span class=&hljs-value& style=&box-sizing: border- color: rgb(0, 136, 0);&&&demo1&&/span& = '&span class=&hljs-attribute& style=&box-sizing: border- color: rgb(102, 0, 102);&&6666&/span&'&&/span&6666&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&/&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&tab-item&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&/&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&tab&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&/&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&template&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&script&/span&&&/span&&span class=&javascript& style=&box-sizing: border-&&
&span class=&hljs-comment& style=&color: rgb(136, 0, 0); box-sizing: border-&&//引入组件&/span&
import {Tab, TabItem} from &span class=&hljs-string& style=&color: rgb(0, 136, 0); box-sizing: border-&&'vux/src/components'&/span&
&span class=&hljs-comment& style=&color: rgb(136, 0, 0); box-sizing: border-&&//创造构造器&/span&
export &span class=&hljs-keyword& style=&color: rgb(0, 0, 136); box-sizing: border-&&default&/span& {
components: {
Tab, TabItem
&span class=&hljs-keyword& style=&color: rgb(0, 0, 136); box-sizing: border-&&return&/span& {
demo1: &span class=&hljs-string& style=&color: rgb(0, 136, 0); box-sizing: border-&&'1'&/span&
&span class=&hljs-comment& style=&color: rgb(136, 0, 0); box-sizing: border-&&/*创造构造器的老版本的写法，编译的时候会报错，执行没有问题。
var MyComponent = Vue.extend{
components: {
Divider,FlexboxItem,Flexbox
}*/&/span&
&/span&&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&/&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&script&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&style&/span&&&/span&&span class=&css& style=&box-sizing: border-&&
&span class=&hljs-class& style=&box-sizing: border- color: rgb(155, 112, 63);&&.flex-demo&/span& &span class=&hljs-rules& style=&box-sizing: border-&&{
&span class=&hljs-rule& style=&box-sizing: border-&&&span class=&hljs-attribute& style=&box-sizing: border-&&text-align&/span&:&span class=&hljs-value& style=&box-sizing: border- color: rgb(0, 102, 102);&& center&/span&&/span&;
&span class=&hljs-rule& style=&box-sizing: border-&&&span class=&hljs-attribute& style=&box-sizing: border-&&color&/span&:&span class=&hljs-value& style=&box-sizing: border- color: rgb(0, 102, 102);&& &span class=&hljs-hexcolor& style=&box-sizing: border-&&#fff&/span&&/span&&/span&;
&span class=&hljs-rule& style=&box-sizing: border-&&&span class=&hljs-attribute& style=&box-sizing: border-&&background-color&/span&:&span class=&hljs-value& style=&box-sizing: border- color: rgb(0, 102, 102);&& &span class=&hljs-hexcolor& style=&box-sizing: border-&MFF&/span&&/span&&/span&;
&span class=&hljs-rule& style=&box-sizing: border-&&&span class=&hljs-attribute& style=&box-sizing: border-&&margin-bottom&/span&:&span class=&hljs-value& style=&box-sizing: border- color: rgb(0, 102, 102);&& &span class=&hljs-number& style=&box-sizing: border-&&8&/span&px&/span&&/span&;
&span class=&hljs-rule& style=&box-sizing: border-&&&span class=&hljs-attribute& style=&box-sizing: border-&&border-radius&/span&:&span class=&hljs-value& style=&box-sizing: border- color: rgb(0, 102, 102);&& &span class=&hljs-number& style=&box-sizing: border-&&4&/span&px&/span&&/span&;
&span class=&hljs-rule& style=&box-sizing: border-&&&span class=&hljs-attribute& style=&box-sizing: border-&&-webkit-background-clip&/span&:&span class=&hljs-value& style=&box-sizing: border- color: rgb(0, 102, 102);&& padding-box&/span&&/span&;
&span class=&hljs-rule& style=&box-sizing: border-&&}&/span&&/span&
&/span&&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&/&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&style&/span&&&/span&&/code&&ul class=&pre-numbering& style=&box-sizing: border- position: width: 50 background-color: rgb(238, 238, 238); top: 0 left: 0 margin: 0 padding: 6px 0px 40 border-right: 1px solid rgb(221, 221, 221); list-style: text-align:&&&li style=&box-sizing: border- padding: 0px 5&&1&/li&&li style=&box-sizing: border- padding: 0px 5&&2&/li&&li style=&box-sizing: border- padding: 0px 5&&3&/li&&li style=&box-sizing: border- padding: 0px 5&&4&/li&&li style=&box-sizing: border- padding: 0px 5&&5&/li&&li style=&box-sizing: border- padding: 0px 5&&6&/li&&li style=&box-sizing: border- padding: 0px 5&&7&/li&&li style=&box-sizing: border- padding: 0px 5&&8&/li&&li style=&box-sizing: border- padding: 0px 5&&9&/li&&li style=&box-sizing: border- padding: 0px 5&&10&/li&&li style=&box-sizing: border- padding: 0px 5&&11&/li&&li style=&box-sizing: border- padding: 0px 5&&12&/li&&li style=&box-sizing: border- padding: 0px 5&&13&/li&&li style=&box-sizing: border- padding: 0px 5&&14&/li&&li style=&box-sizing: border- padding: 0px 5&&15&/li&&li style=&box-sizing: border- padding: 0px 5&&16&/li&&li style=&box-sizing: border- padding: 0px 5&&17&/li&&li style=&box-sizing: border- padding: 0px 5&&18&/li&&li style=&box-sizing: border- padding: 0px 5&&19&/li&&li style=&box-sizing: border- padding: 0px 5&&20&/li&&li style=&box-sizing: border- padding: 0px 5&&21&/li&&li style=&box-sizing: border- padding: 0px 5&&22&/li&&li style=&box-sizing: border- padding: 0px 5&&23&/li&&li style=&box-sizing: border- padding: 0px 5&&24&/li&&li style=&box-sizing: border- padding: 0px 5&&25&/li&&li style=&box-sizing: border- padding: 0px 5&&26&/li&&li style=&box-sizing: border- padding: 0px 5&&27&/li&&li style=&box-sizing: border- padding: 0px 5&&28&/li&&li style=&box-sizing: border- padding: 0px 5&&29&/li&&li style=&box-sizing: border- padding: 0px 5&&30&/li&&li style=&box-sizing: border- padding: 0px 5&&31&/li&&li style=&box-sizing: border- padding: 0px 5&&32&/li&&li style=&box-sizing: border- padding: 0px 5&&33&/li&&li style=&box-sizing: border- padding: 0px 5&&34&/li&&li style=&box-sizing: border- padding: 0px 5&&35&/li&&li style=&box-sizing: border- padding: 0px 5&&36&/li&&li style=&box-sizing: border- padding: 0px 5&&37&/li&&li style=&box-sizing: border- padding: 0px 5&&38&/li&&li style=&box-sizing: border- padding: 0px 5&&39&/li&&li style=&box-sizing: border- padding: 0px 5&&40&/li&&li style=&box-sizing: border- padding: 0px 5&&41&/li&&li style=&box-sizing: border- padding: 0px 5&&42&/li&&/ul&&ul class=&pre-numbering& style=&box-sizing: border- position: width: 50 background-color: rgb(238, 238, 238); top: 0 left: 0 margin: 0 padding: 6px 0px 40 border-right: 1px solid rgb(221, 221, 221); list-style: text-align:&&&li style=&box-sizing: border- padding: 0px 5&&1&/li&&li style=&box-sizing: border- padding: 0px 5&&2&/li&&li style=&box-sizing: border- padding: 0px 5&&3&/li&&li style=&box-sizing: border- padding: 0px 5&&4&/li&&li style=&box-sizing: border- padding: 0px 5&&5&/li&&li style=&box-sizing: border- padding: 0px 5&&6&/li&&li style=&box-sizing: border- padding: 0px 5&&7&/li&&li style=&box-sizing: border- padding: 0px 5&&8&/li&&li style=&box-sizing: border- padding: 0px 5&&9&/li&&li style=&box-sizing: border- padding: 0px 5&&10&/li&&li style=&box-sizing: border- padding: 0px 5&&11&/li&&li style=&box-sizing: border- padding: 0px 5&&12&/li&&li style=&box-sizing: border- padding: 0px 5&&13&/li&&li style=&box-sizing: border- padding: 0px 5&&14&/li&&li style=&box-sizing: border- padding: 0px 5&&15&/li&&li style=&box-sizing: border- padding: 0px 5&&16&/li&&li style=&box-sizing: border- padding: 0px 5&&17&/li&&li style=&box-sizing: border- padding: 0px 5&&18&/li&&li style=&box-sizing: border- padding: 0px 5&&19&/li&&li style=&box-sizing: border- padding: 0px 5&&20&/li&&li style=&box-sizing: border- padding: 0px 5&&21&/li&&li style=&box-sizing: border- padding: 0px 5&&22&/li&&li style=&box-sizing: border- padding: 0px 5&&23&/li&&li style=&box-sizing: border- padding: 0px 5&&24&/li&&li style=&box-sizing: border- padding: 0px 5&&25&/li&&li style=&box-sizing: border- padding: 0px 5&&26&/li&&li style=&box-sizing: border- padding: 0px 5&&27&/li&&li style=&box-sizing: border- padding: 0px 5&&28&/li&&li style=&box-sizing: border- padding: 0px 5&&29&/li&&li style=&box-sizing: border- padding: 0px 5&&30&/li&&li style=&box-sizing: border- padding: 0px 5&&31&/li&&li style=&box-sizing: border- padding: 0px 5&&32&/li&&li style=&box-sizing: border- padding: 0px 5&&33&/li&&li style=&box-sizing: border- padding: 0px 5&&34&/li&&li style=&box-sizing: border- padding: 0px 5&&35&/li&&li style=&box-sizing: border- padding: 0px 5&&36&/li&&li style=&box-sizing: border- padding: 0px 5&&37&/li&&li style=&box-sizing: border- padding: 0px 5&&38&/li&&li style=&box-sizing: border- padding: 0px 5&&39&/li&&li style=&box-sizing: border- padding: 0px 5&&40&/li&&li style=&box-sizing: border- padding: 0px 5&&41&/li&&li style=&box-sizing: border- padding: 0px 5&&42&/li&&/ul&
更简洁的粟子
&code class=&hljs livecodeserver has-numbering& style=&display: padding: 0 background: color: box-sizing: border- font-family: &Source Code Pro&,font-size: white-space: border-radius: 0 word-wrap:&&&&span class=&hljs-constant& style=&box-sizing: border-&&tab&/span& :&span class=&hljs-built_in& style=&color: rgb(102, 0, 102); box-sizing: border-&&line&/span&-width=&span class=&hljs-string& style=&color: rgb(0, 136, 0); box-sizing: border-&&&2&&/span& active-color=&span class=&hljs-string& style=&color: rgb(0, 136, 0); box-sizing: border-&&&#fc378c&&/span&&
&&span class=&hljs-constant& style=&box-sizing: border-&&tab&/span&-&span class=&hljs-keyword& style=&color: rgb(0, 0, 136); box-sizing: border-&&item&/span& :selected=&span class=&hljs-string& style=&color: rgb(0, 136, 0); box-sizing: border-&&&demo2 === item&&/span& v-&span class=&hljs-keyword& style=&color: rgb(0, 0, 136); box-sizing: border-&&for&/span&=&span class=&hljs-string& style=&color: rgb(0, 136, 0); box-sizing: border-&&&item in list2&&/span& @click=&span class=&hljs-string& style=&color: rgb(0, 136, 0); box-sizing: border-&&&demo2 = item&&/span&&&/&span class=&hljs-constant& style=&box-sizing: border-&&tab&/span&-&span class=&hljs-keyword& style=&color: rgb(0, 0, 136); box-sizing: border-&&item&/span&&
&/&span class=&hljs-constant& style=&box-sizing: border-&&tab&/span&&
export default {
&span class=&hljs-constant& style=&box-sizing: border-&&return&/span& {
demo2: &span class=&hljs-string& style=&color: rgb(0, 136, 0); box-sizing: border-&&'美食'&/span&,
list2: [&span class=&hljs-string& style=&color: rgb(0, 136, 0); box-sizing: border-&&'精选'&/span&, &span class=&hljs-string& style=&color: rgb(0, 136, 0); box-sizing: border-&&'美食'&/span&, &span class=&hljs-string& style=&color: rgb(0, 136, 0); box-sizing: border-&&'电影'&/span&, &span class=&hljs-string& style=&color: rgb(0, 136, 0); box-sizing: border-&&'酒店'&/span&, &span class=&hljs-string& style=&color: rgb(0, 136, 0); box-sizing: border-&&'外卖'&/span&]
}&/code&&ul class=&pre-numbering& style=&box-sizing: border- position: width: 50 background-color: rgb(238, 238, 238); top: 0 left: 0 margin: 0 padding: 6px 0px 40 border-right: 1px solid rgb(221, 221, 221); list-style: text-align:&&&li style=&box-sizing: border- padding: 0px 5&&1&/li&&li style=&box-sizing: border- padding: 0px 5&&2&/li&&li style=&box-sizing: border- padding: 0px 5&&3&/li&&li style=&box-sizing: border- padding: 0px 5&&4&/li&&li style=&box-sizing: border- padding: 0px 5&&5&/li&&li style=&box-sizing: border- padding: 0px 5&&6&/li&&li style=&box-sizing: border- padding: 0px 5&&7&/li&&li style=&box-sizing: border- padding: 0px 5&&8&/li&&li style=&box-sizing: border- padding: 0px 5&&9&/li&&li style=&box-sizing: border- padding: 0px 5&&10&/li&&li style=&box-sizing: border- padding: 0px 5&&11&/li&&li style=&box-sizing: border- padding: 0px 5&&12&/li&&li style=&box-sizing: border- padding: 0px 5&&13&/li&&/ul&&ul class=&pre-numbering& style=&box-sizing: border- position: width: 50 background-color: rgb(238, 238, 238); top: 0 left: 0 margin: 0 padding: 6px 0px 40 border-right: 1px solid rgb(221, 221, 221); list-style: text-align:&&&li style=&box-sizing: border- padding: 0px 5&&1&/li&&li style=&box-sizing: border- padding: 0px 5&&2&/li&&li style=&box-sizing: border- padding: 0px 5&&3&/li&&li style=&box-sizing: border- padding: 0px 5&&4&/li&&li style=&box-sizing: border- padding: 0px 5&&5&/li&&li style=&box-sizing: border- padding: 0px 5&&6&/li&&li style=&box-sizing: border- padding: 0px 5&&7&/li&&li style=&box-sizing: border- padding: 0px 5&&8&/li&&li style=&box-sizing: border- padding: 0px 5&&9&/li&&li style=&box-sizing: border- padding: 0px 5&&10&/li&&li style=&box-sizing: border- padding: 0px 5&&11&/li&&li style=&box-sizing: border- padding: 0px 5&&12&/li&&li style=&box-sizing: border- padding: 0px 5&&13&/li&&/ul&
Popup弹出层
默认值
Popup，需要双向绑定 Boolean
弹出层高度
String auto
如果希望弹出层铺满整个屏幕，则可设置height=100%
on-first-show 第一次出现时，用于需要在第一次进行异步数据获取或者必要的UI渲染（如Popup内有Scroller）
&code class=&hljs xml has-numbering& style=&display: padding: 0 background: color: box-sizing: border- font-family: &Source Code Pro&,font-size: white-space: border-radius: 0 word-wrap:&&&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&template&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&div&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&group&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&switch&/span& &span class=&hljs-attribute& style=&box-sizing: border- color: rgb(102, 0, 102);&&title&/span&=&span class=&hljs-value& style=&box-sizing: border- color: rgb(0, 136, 0);&&&WIFI&&/span& &span class=&hljs-attribute& style=&box-sizing: border- color: rgb(102, 0, 102);&&:value.sync&/span&=&span class=&hljs-value& style=&box-sizing: border- color: rgb(0, 136, 0);&&&show&&/span&&&/span&&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&/&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&switch&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&switch&/span& &span class=&hljs-attribute& style=&box-sizing: border- color: rgb(102, 0, 102);&&title&/span&=&span class=&hljs-value& style=&box-sizing: border- color: rgb(0, 136, 0);&&&Full popup&&/span& &span class=&hljs-attribute& style=&box-sizing: border- color: rgb(102, 0, 102);&&:value.sync&/span&=&span class=&hljs-value& style=&box-sizing: border- color: rgb(0, 136, 0);&&&show1&&/span&&&/span&&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&/&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&switch&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&/&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&group&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&popup&/span& &span class=&hljs-attribute& style=&box-sizing: border- color: rgb(102, 0, 102);&&:show.sync&/span&=&span class=&hljs-value& style=&box-sizing: border- color: rgb(0, 136, 0);&&&show&&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&div&/span& &span class=&hljs-attribute& style=&box-sizing: border- color: rgb(102, 0, 102);&&class&/span&=&span class=&hljs-value& style=&box-sizing: border- color: rgb(0, 136, 0);&&&popup0&&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&group&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&switch&/span& &span class=&hljs-attribute& style=&box-sizing: border- color: rgb(102, 0, 102);&&title&/span&=&span class=&hljs-value& style=&box-sizing: border- color: rgb(0, 136, 0);&&&Another Switcher&&/span& &span class=&hljs-attribute& style=&box-sizing: border- color: rgb(102, 0, 102);&&:value.sync&/span&=&span class=&hljs-value& style=&box-sizing: border- color: rgb(0, 136, 0);&&&show&&/span&&&/span&&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&/&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&switch&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&/&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&group&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&/&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&div&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&/&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&popup&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&popup&/span& &span class=&hljs-attribute& style=&box-sizing: border- color: rgb(102, 0, 102);&&:show.sync&/span&=&span class=&hljs-value& style=&box-sizing: border- color: rgb(0, 136, 0);&&&show1&&/span& &span class=&hljs-attribute& style=&box-sizing: border- color: rgb(102, 0, 102);&&height&/span&=&span class=&hljs-value& style=&box-sizing: border- color: rgb(0, 136, 0);&&&80%&&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&div&/span& &span class=&hljs-attribute& style=&box-sizing: border- color: rgb(102, 0, 102);&&class&/span&=&span class=&hljs-value& style=&box-sizing: border- color: rgb(0, 136, 0);&&&popup1&&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&group&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&switch&/span& &span class=&hljs-attribute& style=&box-sizing: border- color: rgb(102, 0, 102);&&title&/span&=&span class=&hljs-value& style=&box-sizing: border- color: rgb(0, 136, 0);&&&Another Switcher&&/span& &span class=&hljs-attribute& style=&box-sizing: border- color: rgb(102, 0, 102);&&:value.sync&/span&=&span class=&hljs-value& style=&box-sizing: border- color: rgb(0, 136, 0);&&&show1&&/span&&&/span&&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&/&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&switch&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&/&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&group&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&/&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&div&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&/&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&popup&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&/&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&div&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&/&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&template&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&script&/span&&&/span&&span class=&javascript& style=&box-sizing: border-&&
&span class=&hljs-comment& style=&color: rgb(136, 0, 0); box-sizing: border-&&//引入组件&/span&
} from &span class=&hljs-string& style=&color: rgb(0, 136, 0); box-sizing: border-&&'vux/src/components'&/span&
&span class=&hljs-comment& style=&color: rgb(136, 0, 0); box-sizing: border-&&//创造构造器&/span&
export &span class=&hljs-keyword& style=&color: rgb(0, 0, 136); box-sizing: border-&&default&/span& {
components:{
Group,Switch,Popup
&span class=&hljs-keyword& style=&color: rgb(0, 0, 136); box-sizing: border-&&return&/span& {
show: &span class=&hljs-literal& style=&color: rgb(0, 102, 102); box-sizing: border-&&false&/span&,
show1: &span class=&hljs-literal& style=&color: rgb(0, 102, 102); box-sizing: border-&&false&/span&
&span class=&hljs-comment& style=&color: rgb(136, 0, 0); box-sizing: border-&&/*创造构造器的老版本的写法，编译的时候会报错，执行没有问题。
var MyComponent = Vue.extend{
components: {
Divider,FlexboxItem,Flexbox
}*/&/span&
&/span&&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&/&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&script&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&style&/span&&&/span&&span class=&css& style=&box-sizing: border-&&
&span class=&hljs-class& style=&box-sizing: border- color: rgb(155, 112, 63);&&.popup0&/span& &span class=&hljs-rules& style=&box-sizing: border-&&{
&span class=&hljs-rule& style=&box-sizing: border-&&&span class=&hljs-attribute& style=&box-sizing: border-&&padding-bottom&/span&:&span class=&hljs-value& style=&box-sizing: border- color: rgb(0, 102, 102);&&&span class=&hljs-number& style=&box-sizing: border-&&15&/span&px&/span&&/span&;
&span class=&hljs-rule& style=&box-sizing: border-&&&span class=&hljs-attribute& style=&box-sizing: border-&&height&/span&:&span class=&hljs-value& style=&box-sizing: border- color: rgb(0, 102, 102);&&&span class=&hljs-number& style=&box-sizing: border-&&200&/span&px&/span&&/span&;
&span class=&hljs-rule& style=&box-sizing: border-&&}&/span&&/span&
&span class=&hljs-class& style=&box-sizing: border- color: rgb(155, 112, 63);&&.popup1&/span& &span class=&hljs-rules& style=&box-sizing: border-&&{
&span class=&hljs-rule& style=&box-sizing: border-&&&span class=&hljs-attribute& style=&box-sizing: border-&&width&/span&:&span class=&hljs-value& style=&box-sizing: border- color: rgb(0, 102, 102);&&&span class=&hljs-number& style=&box-sizing: border-&&100&/span&%&/span&&/span&;
&span class=&hljs-rule& style=&box-sizing: border-&&&span class=&hljs-attribute& style=&box-sizing: border-&&height&/span&:&span class=&hljs-value& style=&box-sizing: border- color: rgb(0, 102, 102);&&&span class=&hljs-number& style=&box-sizing: border-&&100&/span&%&/span&&/span&;
&span class=&hljs-rule& style=&box-sizing: border-&&}&/span&&/span&
&/span&&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&/&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&style&/span&&&/span&
&/code&&ul class=&pre-numbering& style=&box-sizing: border- position: width: 50 background-color: rgb(238, 238, 238); top: 0 left: 0 margin: 0 padding: 6px 0px 40 border-right: 1px solid rgb(221, 221, 221); list-style: text-align:&&&li style=&box-sizing: border- padding: 0px 5&&1&/li&&li style=&box-sizing: border- padding: 0px 5&&2&/li&&li style=&box-sizing: border- padding: 0px 5&&3&/li&&li style=&box-sizing: border- padding: 0px 5&&4&/li&&li style=&box-sizing: border- padding: 0px 5&&5&/li&&li style=&box-sizing: border- padding: 0px 5&&6&/li&&li style=&box-sizing: border- padding: 0px 5&&7&/li&&li style=&box-sizing: border- padding: 0px 5&&8&/li&&li style=&box-sizing: border- padding: 0px 5&&9&/li&&li style=&box-sizing: border- padding: 0px 5&&10&/li&&li style=&box-sizing: border- padding: 0px 5&&11&/li&&li style=&box-sizing: border- padding: 0px 5&&12&/li&&li style=&box-sizing: border- padding: 0px 5&&13&/li&&li style=&box-sizing: border- padding: 0px 5&&14&/li&&li style=&box-sizing: border- padding: 0px 5&&15&/li&&li style=&box-sizing: border- padding: 0px 5&&16&/li&&li style=&box-sizing: border- padding: 0px 5&&17&/li&&li style=&box-sizing: border- padding: 0px 5&&18&/li&&li style=&box-sizing: border- padding: 0px 5&&19&/li&&li style=&box-sizing: border- padding: 0px 5&&20&/li&&li style=&box-sizing: border- padding: 0px 5&&21&/li&&li style=&box-sizing: border- padding: 0px 5&&22&/li&&li style=&box-sizing: border- padding: 0px 5&&23&/li&&li style=&box-sizing: border- padding: 0px 5&&24&/li&&li style=&box-sizing: border- padding: 0px 5&&25&/li&&li style=&box-sizing: border- padding: 0px 5&&26&/li&&li style=&box-sizing: border- padding: 0px 5&&27&/li&&li style=&box-sizing: border- padding: 0px 5&&28&/li&&li style=&box-sizing: border- padding: 0px 5&&29&/li&&li style=&box-sizing: border- padding: 0px 5&&30&/li&&li style=&box-sizing: border- padding: 0px 5&&31&/li&&li style=&box-sizing: border- padding: 0px 5&&32&/li&&li style=&box-sizing: border- padding: 0px 5&&33&/li&&li style=&box-sizing: border- padding: 0px 5&&34&/li&&li style=&box-sizing: border- padding: 0px 5&&35&/li&&li style=&box-sizing: border- padding: 0px 5&&36&/li&&li style=&box-sizing: border- padding: 0px 5&&37&/li&&li style=&box-sizing: border- padding: 0px 5&&38&/li&&li style=&box-sizing: border- padding: 0px 5&&39&/li&&li style=&box-sizing: border- padding: 0px 5&&40&/li&&li style=&box-sizing: border- padding: 0px 5&&41&/li&&li style=&box-sizing: border- padding: 0px 5&&42&/li&&li style=&box-sizing: border- padding: 0px 5&&43&/li&&li style=&box-sizing: border- padding: 0px 5&&44&/li&&li style=&box-sizing: border- padding: 0px 5&&45&/li&&li style=&box-sizing: border- padding: 0px 5&&46&/li&&li style=&box-sizing: border- padding: 0px 5&&47&/li&&li style=&box-sizing: border- padding: 0px 5&&48&/li&&li style=&box-sizing: border- padding: 0px 5&&49&/li&&li style=&box-sizing: border- padding: 0px 5&&50&/li&&li style=&box-sizing: border- padding: 0px 5&&51&/li&&li style=&box-sizing: border- padding: 0px 5&&52&/li&&li style=&box-sizing: border- padding: 0px 5&&53&/li&&li style=&box-sizing: border- padding: 0px 5&&54&/li&&li style=&box-sizing: border- padding: 0px 5&&55&/li&&li style=&box-sizing: border- padding: 0px 5&&56&/li&&li style=&box-sizing: border- padding: 0px 5&&57&/li&&li style=&box-sizing: border- padding: 0px 5&&58&/li&&li style=&box-sizing: border- padding: 0px 5&&59&/li&&li style=&box-sizing: border- padding: 0px 5&&60&/li&&li style=&box-sizing: border- padding: 0px 5&&61&/li&&/ul&&ul class=&pre-numbering& style=&box-sizing: border- position: width: 50 background-color: rgb(238, 238, 238); top: 0 left: 0 margin: 0 padding: 6px 0px 40 border-right: 1px solid rgb(221, 221, 221); list-style: text-align:&&&li style=&box-sizing: border- padding: 0px 5&&1&/li&&li style=&box-sizing: border- padding: 0px 5&&2&/li&&li style=&box-sizing: border- padding: 0px 5&&3&/li&&li style=&box-sizing: border- padding: 0px 5&&4&/li&&li style=&box-sizing: border- padding: 0px 5&&5&/li&&li style=&box-sizing: border- padding: 0px 5&&6&/li&&li style=&box-sizing: border- padding: 0px 5&&7&/li&&li style=&box-sizing: border- padding: 0px 5&&8&/li&&li style=&box-sizing: border- padding: 0px 5&&9&/li&&li style=&box-sizing: border- padding: 0px 5&&10&/li&&li style=&box-sizing: border- padding: 0px 5&&11&/li&&li style=&box-sizing: border- padding: 0px 5&&12&/li&&li style=&box-sizing: border- padding: 0px 5&&13&/li&&li style=&box-sizing: border- padding: 0px 5&&14&/li&&li style=&box-sizing: border- padding: 0px 5&&15&/li&&li style=&box-sizing: border- padding: 0px 5&&16&/li&&li style=&box-sizing: border- padding: 0px 5&&17&/li&&li style=&box-sizing: border- padding: 0px 5&&18&/li&&li style=&box-sizing: border- padding: 0px 5&&19&/li&&li style=&box-sizing: border- padding: 0px 5&&20&/li&&li style=&box-sizing: border- padding: 0px 5&&21&/li&&li style=&box-sizing: border- padding: 0px 5&&22&/li&&li style=&box-sizing: border- padding: 0px 5&&23&/li&&li style=&box-sizing: border- padding: 0px 5&&24&/li&&li style=&box-sizing: border- padding: 0px 5&&25&/li&&li style=&box-sizing: border- padding: 0px 5&&26&/li&&li style=&box-sizing: border- padding: 0px 5&&27&/li&&li style=&box-sizing: border- padding: 0px 5&&28&/li&&li style=&box-sizing: border- padding: 0px 5&&29&/li&&li style=&box-sizing: border- padding: 0px 5&&30&/li&&li style=&box-sizing: border- padding: 0px 5&&31&/li&&li style=&box-sizing: border- padding: 0px 5&&32&/li&&li style=&box-sizing: border- padding: 0px 5&&33&/li&&li style=&box-sizing: border- padding: 0px 5&&34&/li&&li style=&box-sizing: border- padding: 0px 5&&35&/li&&li style=&box-sizing: border- padding: 0px 5&&36&/li&&li style=&box-sizing: border- padding: 0px 5&&37&/li&&li style=&box-sizing: border- padding: 0px 5&&38&/li&&li style=&box-sizing: border- padding: 0px 5&&39&/li&&li style=&box-sizing: border- padding: 0px 5&&40&/li&&li style=&box-sizing: border- padding: 0px 5&&41&/li&&li style=&box-sizing: border- padding: 0px 5&&42&/li&&li style=&box-sizing: border- padding: 0px 5&&43&/li&&li style=&box-sizing: border- padding: 0px 5&&44&/li&&li style=&box-sizing: border- padding: 0px 5&&45&/li&&li style=&box-sizing: border- padding: 0px 5&&46&/li&&li style=&box-sizing: border- padding: 0px 5&&47&/li&&li style=&box-sizing: border- padding: 0px 5&&48&/li&&li style=&box-sizing: border- padding: 0px 5&&49&/li&&li style=&box-sizing: border- padding: 0px 5&&50&/li&&li style=&box-sizing: border- padding: 0px 5&&51&/li&&li style=&box-sizing: border- padding: 0px 5&&52&/li&&li style=&box-sizing: border- padding: 0px 5&&53&/li&&li style=&box-sizing: border- padding: 0px 5&&54&/li&&li style=&box-sizing: border- padding: 0px 5&&55&/li&&li style=&box-sizing: border- padding: 0px 5&&56&/li&&li style=&box-sizing: border- padding: 0px 5&&57&/li&&li style=&box-sizing: border- padding: 0px 5&&58&/li&&li style=&box-sizing: border- padding: 0px 5&&59&/li&&li style=&box-sizing: border- padding: 0px 5&&60&/li&&li style=&box-sizing: border- padding: 0px 5&&61&/li&&/ul&
Sticky 自动固定在顶部
&code class=&hljs xml has-numbering& style=&display: padding: 0 background: color: box-sizing: border- font-family: &Source Code Pro&,font-size: white-space: border-radius: 0 word-wrap:&&&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&template&/span&&&/span&
&span class=&hljs-comment& style=&color: rgb(136, 0, 0); box-sizing: border-&&&!-- &br v-for=&i in number&&中的number是调节高度的 --&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&br&/span& &span class=&hljs-attribute& style=&box-sizing: border- color: rgb(102, 0, 102);&&v-for&/span&=&span class=&hljs-value& style=&box-sizing: border- color: rgb(0, 136, 0);&&&i in 5&&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&sticky&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&tab&/span& &span class=&hljs-attribute& style=&box-sizing: border- color: rgb(102, 0, 102);&&:line-width&/span&=&span class=&hljs-value& style=&box-sizing: border- color: rgb(0, 136, 0);&&1&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&tab-item&/span& &span class=&hljs-attribute& style=&box-sizing: border- color: rgb(102, 0, 102);&&selected&/span&&&/span&正在正映&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&/&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&tab-item&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&tab-item&/span&&&/span&即将上映&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&/&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&tab-item&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&/&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&tab&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&/&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&sticky&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&br&/span& &span class=&hljs-attribute& style=&box-sizing: border- color: rgb(102, 0, 102);&&v-for&/span&=&span class=&hljs-value& style=&box-sizing: border- color: rgb(0, 136, 0);&&&i in 50&&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&/&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&template&/span&&&/span&
&span class=&hljs-tag& style=&color: rgb(0, 102, 102); box-sizing: border-&&&&span class=&hljs-title& style=&box-sizing: border- color: rgb(0, 0, 136);&&script&/span&&&/span&&span class=&javascript& style=&box-sizing: border-&&
&span class=&hljs-comment& style=&color: rgb(136, 0, 0); box-sizing: border-&&//引入组件&/span&
} from &span class=&hljs-string& style=&color: rgb(}
我要回帖
更多推荐
- ·最近看了一个MV,讲的是女主角是个杀手mv讲了什么,要杀她的男朋友,请问歌曲的名 ...
- ·丁丑年壬子月丙申日辰时癸卯月壬子日丁未时女命？
- ·repeat歌词中文谐音翻译英语软件？
- ·一个女机甲组队打擂台的日本十大机甲动漫动漫？
- ·计算能手苏教版六年级下册数学书答案上册97页的解方程要过程？
- ·马来西亚武汉供卵试管管技术水平怎样
- ·现在污染严重，怎样可以消除室内的病毒和细菌和病毒的区别呢？
- ·2018考研英语二作文作文谁的好
- ·"我的生命我的爱有何意义
- ·怎么看待塞尔维亚人对中国人最友好的国家友好这个“定论”
- ·有一句话里面有什么 静好了时光 蹉跎了岁月静好 时光易老，怎么说来着
- ·江博教育ACT怎样？业内在职研究生企业认可吗不
- ·有可能比晚明政府里的满族人写得更多人叫好吗
- ·272-292+583的4.05加37.85简便计算算
- ·百岁山迁西板栗价格生产厂址，会比铁栗多响亮吗
- ·上海cma美国注册管理会计会计师培训哪家好
- ·您好，我高中毕业上什么大专刚毕业考一个大专家里人不同意上，就辍学了，现在很迷茫想学个技术里，您有什么好的建议吗？
- ·使用除尘布袋的旋风除尘器优缺点有哪些优点和缺点
- ·郑州老碗面加盟技术培训免费是真的吗？
- ·美集品下载安装和暨北生物是一个公司吗？
- ·vux pullup to pulltorefreshlayout 怎么去掉
- ·58除以25420除以28的简便方法法
- ·为什么有些人说话带刺会有一些错误的知识？
- ·2018考研英语作文预测用什么书
- ·elementui tree load tree为什么不能选择
- ·已知2lg x 2y lgxlgy=lgx+lgy，求log以根号2为底以为真数的值
- ·想宁波学电脑办公初级办公有没有群交流一下
- ·如何不用知米背单词 发音 不准，光听正确的发音就能拼写出单词来
- ·上海西安html5培训哪家好好
- ·android 怎么在activity 传递对象之间传递List 类型的数据
- ·秋天的怀念教案改为怀念好不好为什么
- ·双头螺柱标准主要应用在哪些方面？
- ·我想刻一个我一直从我喜欢你那刻开始而且等她的刻字不知道写什么好
- ·android studio设置gradle版本怎么看gradle需要哪个版本
- ·中信信用卡如何注销注销多久可以申请新卡
