加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

vue刷新和tab切换实例

发布时间:2020-12-17 02:35:07 所属栏目:百科 来源:网络整理
导读:首先写个子组件用来放刷新的内容,命名为pull(可以看例子最后面放的。) 然后再要刷新的页面引用 价格 //点击价格会排序 pull up="true" down="true" @up="next" @down="shuaxin" ref="pull" div class="mui-row mui-col-xs-12 mui-clearfix"gt; span class

首先写个子组件用来放刷新的内容,命名为pull(可以看例子最后面放的。)

然后再要刷新的页面引用

价格 //点击价格会排序
<pull up="true" down="true" @up="next" @down="shuaxin" ref="pull">

<div class="mui-row mui-col-xs-12 mui-clearfix"&gt;
  <span class="mui-col-xs-6" v-href="{name:'商品详情'}" rel="external nofollow" v-for="item in list"&gt;
   <div class="img"&gt;<img v-bind:src="item.goods_image"/&gt;</div>
   <h4>{{item.goods_name}}</h4>
   <p class="red1"&gt;¥{{item.goods_price}}</p>
  </span>
 </div>

下面是命名为pull的子组件。

暂无内容

tab的一个例子

<div class="fbjbox">
<div class="fbjbox1">
<tab ref="tab" :list="['一级合伙人'+count,'二级合伙人']" width="50%" @change="tabchange" />

一级合伙人总数{{count}}人
    {{item.identity}}

     </ul> 
    
    </template>
    <template v-if="list!=null&&tab==1"&gt;     
     <h4 >二级合伙人总数{{count}}人</h4>
      <ul class="mui-table-view clear"&gt;
       <li class="mui-table-view-cell mui-media" v-for="item,index in list"&gt;
         <div class="mui-media-body" v-cloak>
          {{type(index)}}人数<p class="mui-pull-right"&gt;{{item}}</p>
         </div>
       </li>
    
      </ul> 
    </template>
    <!--<template v-if="list==null"&gt;
     <div class=" mui-text-center" style="padding: 50px;"&gt;
    
     <span class="mui-spinner"&gt;</span>
     </div>
    </template>-->
    <template v-if="list==[]"&gt;
     <div>暂无下线</div>
    </template>