VUE refresh and TAB switching instance

First written a subcomponent to put a new content, named PULL (can be seen in the last face.)

Then refresh the page reference

  Price  
// Click the price will be sorted
{{item.goods_name}}
¥ {{item.goods_price}} 图片[1]-VUE refresh and TAB switching instance-Tumi

/ * tab color * / .tab {background: #fff;} .tab a.active {color: # d83737; border-bottom: 2px Solid # d83737; }.red1 {color: red; font-size: 15px; padding-limited: 16px} H5 {font-size: 16px; font-weight: Normal; Color: # 656565; padding-left: 10px}
.Container {font-family: "Microsoft Ya];} .MUI-ROW {Overflow: hidden; margin-bottom: 20px;} .MUI-ROW .MUI-COL-XS-6 {Width: 49%; Background-Color: #fff; overflow: hidden; margin-top: 6pX; Text-align: Left;} .MUI-ROW .MUI-COL-XS-6: nth-child (eve) {margin-left: 2%;} .MUI-ROW IMG {Width: 100%;}. MUI-ROW .IMG {Height: 170px;}
Import Tab from '../public/pull' export default {created () {this.Height = Window. InnerWidth * 40/64; this.s_zc = this. $ route.query.is_zc == 1; this.uid = localStorage.Getitem ('uid');}, mounted () {this.shuaxin (() => { });}, data () {Return {Tab: 0, List: [], Order: 1 // ORDER is sorted. 1 The default, 2 from low to high, 3 from high to low}}}, components: {tab, punl}, compute: {// cmd is also a variable, and different CMDs according to the tab: function () {Switch (THIS.TAB) {Case 0: Return "MP / GoodStuijian"; Case 1: Return "MP / HotGoods"; case 2: return "mp / newgoods";}}}, methods: {tabchange ({INDEX, DATA}) {this.tab = index;}, shuaxin (DONE) {// First entered the initial THIS. $ API (this.cmd, {page: 0, order: this.sort}). Then List => {// In addition to transferring the page, you need to pass the sorted way through this.list = list; done (); // When jumps to a new tab, the page is from the first one. Not pull The position IF (this. $ Refs.pull) {this. $ Refs.pull.reset (); this. $ Refs.pull.nodata = false;}});}, NEXT (DONE) {var Page = THIS .list.length; this. $ api (this.cmd, {page, order: this.sort}). Then (list => {if (list.length == 0) {Return Done && Done (TRUE);} // If there is only Done (True) if only Done (True) is displayed, there is no data, this.list = this.list.concat (); DONE ();});}, change ()} / / Class IF (this.Sort == 1) {this.Sort = 2;} else if (this.sort == 2) {this.sort = 3;} else ss = 3; = 3) {this.Sort = 1;} this.shuaxin (() => {});}}, watch: {// listening. When the option is changed, refresh the page. Tab: function () {this.shuaxin (() => {});},}}
The following is a sub-name Components.

pull-down can be refreshed release immediately Refresh

is refreshing
   
No content
There is no more data
->
.MUI-scroll-wrapper {position: relative; height: 100%;} .Nodata {color: #efefef; text-align: center; margin-top: 10px; line-height: 30px; font-size: 12px; Background: # 0b2e4c}
export default {mounted () {var box = this. $ Refs.box; this.obj =MUI (Box). Scroll ();}, Props: ["Down", "UP", "TOP"], DATA () {Return {Flag: False, Y: 0, Obj: {}, type: 0, Nodata: false}}, computed: {transition: this.type> 0? '-webkit-transform 0.3s ease-in': ", transform: this.type> 0? 'rotate (180deg ) ': "", Animation: this.type == 2? "spinner-spin 1s step-end infinite": "};}}, watch: {type (a, b) {if (b == 1) {this.Type = 2;} if (a == 2) {this.Flag = false; this.obj.settranslate (0, 50); this. $ EMIT ("Down", () => {this.type = 0; this.obj.SetTranslate (0, 0); this.obj.Relayout (); this.nodata = false;});}}}, methods: {reset () {this.obj.settranslate (0, 0);}, sCrollStart () {if (this.obj.lasty 50? 1: 0; if (this.obj.y> 0) {this.y = this.obj.y;}}}, scrollbottom ()} (this.nodata ||! this.up || this.type == 4) return; this.type = 4; this. $ EMIT ("UP", (n) => {this.Type = 0; IF n == true) this.Nodata = true; this.obj.relayout ();});}}}
An example of Tab
<!--
Total number of first-level partners {{count}} {{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{}
The total number of secondary partners {{count}} people

{Type (INDEX)}}

{{Item}}
   
-> No line
  • P {color: # 807e7e} .circle {margin -top: 0px} .mypage {height: 100%;} .MUI-table-view .MUI-Media-object {line-height: 45px; max-width: 45px; height: 45px;} 图片[1]-VUE refresh and TAB switching instance-Tumi
    Import tab from "../public/tab"import pun forward default {mounted () {this.changemes ();}, components: {tab, punl}, data () {Return {Tab: 0, Count: 0, List: []}}, computed: {cmd: function () {switch (THISTAB) {case 0: return "member / oneevel"; case 1: return "MEMBER / TWOLVEL "}}}}} {type (~~ Num) {Case 1: Return "Visitor"; Case 2: Return "User"; Case 3: Return "Fan"; Case 4: Return "Beauty" Case 5: Return "Seller"; Case 6: Return "Partner"; Case 7: Return "franchisees";} Return "unknown";}, TabChange ({index, data}) {this.tab = index }, changemes () {this.list = null; this. $ api (this.cmd) .then (list => {this.count = list.count; this.list = list.list;});}} , watch: {tab: function () {this.changemes ();}}}

    The above VUE refresh and TAB switching example is Xiaobian sharing Give everyone all the content, I hope to give you a reference, I hope everyone will support Tumi Clouds.
© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment