選項卡學習

asce1885 發(fā)布于2019-08-26 10:41 / 1401人閱讀

摘要：實現(xiàn)選項卡評論切換一中的數(shù)據(jù)結(jié)構(gòu)如下說明選項卡有的三個狀態(tài)全部推薦吐槽以的值來區(qū)分全部是選中的狀態(tài)推薦是選中的狀態(tài)吐槽是選中的狀態(tài)以來對選中的狀態(tài)進行標記以對文字信息進行標記組件部分全部全部推薦

實現(xiàn)選項卡評論切換

(一)
data.json中"ratings"的數(shù)據(jù)結(jié)構(gòu)如下：

說明：
選項卡有的三個狀態(tài)全部/推薦/吐槽
以selectType的值來區(qū)分
selectType=2---"全部"是選中的狀態(tài)
selectType=0---"推薦"是選中的狀態(tài)
selectType=1---"吐槽"是選中的狀態(tài)
以class="active"來對選中的狀態(tài)進行標記
以"desc"對文字信息進行標記
ratingselect.vue組件template部分

SCRIPT部分：

(二)父組件部分food.vue
分為選項卡切換(引入前面的組件)，和列表展示兩部分
template部分：

商品評價





    
        
        
            
                {{rating.username}}
                
            
            
                {{rating.rateTime |formateDate}}
            
            
            
                
                {{rating.text}}

SCRIPT部分
//默認展示全部評價
const ALL=2;
export default{

props:{
    food:{
        type:Object
    }
},
data(){
    return{
        showFlag:false,
        selectType:ALL,
        onlyContent:true,
        desc:{
            all:"全部",
            positive:"推薦",
            negative:"吐槽"
        }
    };
}
methods:{
    //show方法由父組件點擊觸發(fā)執(zhí)行
    show(){
        this.showFlag=true;
        //默認全部的選項卡是選中的狀態(tài);展示全部的評價
        this.selectType=ALL;
        //只顯示文本的提示也是選中的狀態(tài)
        this.onlyContent=true;
        this.$nextTick(()=>{
            if(!this.scroll){
                this.scroll=new BScroll(this.$el,{
                    click:true
                });
            }
            else{
                this.scroll.refresh();
        
            }
        
        })
        
    
    },
    incrementTotal(type,data){
        //type:selectType
        //data:點擊時哪一項item的selectType的具體值
        this[type]=data;
        this.$nextTick(()=>{
            this.scroll.refresh();
        });
    },
    needShow(type,text){
       //只看內(nèi)容的radio是選中狀態(tài)，但是沒有內(nèi)容
        if(this.onlyContent&&!text){
            return false;
        }
        //選項卡的選中狀態(tài)是“ALL”,列表展示
        if(this.selectType===ALL){
            return true;
        }
        else{
            return type === this.selectType;
        }
    }

}

}

GPU云服務器云服務器選項卡選項卡窗體選項卡寬度 JTablePane選項卡

文章版權歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/106606.html

MUI框架開發(fā)HTML5手機APP(二)--頁面跳轉(zhuǎn)傳值&底部選項卡切換

摘要：三底部選項卡切換頁面底部選項卡的切換，可以說是的標志之一。兩種模式的顯示效果差不多，如下圖可見兩種模式的區(qū)別顧名思義，模式是將所有子頁面的內(nèi)容，分別放置到主頁不同的中，當我們點擊主頁的不同選項卡時，切換不同的顯示。概述 JRedu 　　在上一篇博客中，我們學習了如何使用Hbuilder創(chuàng)建一個APP，同時如何使用MUI搭建屬于自己的第一款APP，沒有學習的同學可以戳鏈接學習： http...

番茄西紅柿 2019-04-23 13:37 評論0 收藏0
oeasy教您玩轉(zhuǎn)vim - 68 - # 標簽頁tab

摘要：選項卡回憶上次上次有三種批量替換，分別是執(zhí)行的可以用按順序增加分別對應的窗口緩存文件參數(shù)文件各有各自的列表切換刪除增加的方式以什么開始結(jié)束的模式關于窗口容器我們切得越細可用的范圍越小總共的屏幕資源很快就用完了我又想多線程訪問又想 tab選項卡回憶上次上次有三種批量替換，分別是:windo:bufdo:argdo...

pkwenda 2021-11-24 09:39 評論0 收藏0
簡單的選項卡切換效果

摘要：利用錨點的思想可以實現(xiàn)一個簡單的選項卡切換效果。其原理就是在每個列表里塞入一個肉眼看不見的輸入框，然后選項卡按鈕變成元素，并通過屬性與輸入框的相關聯(lián)，這樣，點擊選項按鈕會觸發(fā)輸入框的行為，觸發(fā)錨點定位，實現(xiàn)選項卡切換效果。利用錨點的思想可以實現(xiàn)一個簡單的選項卡切換效果。頁面布局及樣式： 1 2 3 4 1 2 3 4 ...... .bo...

xiaoqibTn 2019-08-29 17:24 評論0 收藏0
CSS學習摘要-定位實例

摘要：學習摘要定位實例學習摘要定位實例注全文摘自定位實例列表消息盒子列表消息盒子我們研究的第一個例子是一個經(jīng)典的選項卡消息框，你想用一塊小區(qū)域包括大量信息時，一個非常常用的特征。刪除你的不需要居中顯示，添加定位調(diào)整屬性把她粘在瀏覽器的視域。CSS學習摘要-定位實例注：全文摘自MDN-CSS定位實例列表消息盒子我們研究的第一個例子是一個經(jīng)典的選項卡消息框，你想用一塊小區(qū)域包括大量信息時，一個非...

kuangcaibao 2019-04-23 13:39 評論0 收藏0