選項卡學習

asce1885 發布于2019-08-26 10:41 / 1396人閱讀

摘要：實現選項卡評論切換一中的數據結構如下說明選項卡有的三個狀態全部推薦吐槽以的值來區分全部是選中的狀態推薦是選中的狀態吐槽是選中的狀態以來對選中的狀態進行標記以對文字信息進行標記組件部分全部全部推薦

實現選項卡評論切換

(一)
data.json中"ratings"的數據結構如下：

說明：
選項卡有的三個狀態全部/推薦/吐槽
以selectType的值來區分
selectType=2---"全部"是選中的狀態
selectType=0---"推薦"是選中的狀態
selectType=1---"吐槽"是選中的狀態
以class="active"來對選中的狀態進行標記
以"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方法由父組件點擊觸發執行
    show(){
        this.showFlag=true;
        //默認全部的選項卡是選中的狀態;展示全部的評價
        this.selectType=ALL;
        //只顯示文本的提示也是選中的狀態
        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){
       //只看內容的radio是選中狀態，但是沒有內容
        if(this.onlyContent&&!text){
            return false;
        }
        //選項卡的選中狀態是“ALL”,列表展示
        if(this.selectType===ALL){
            return true;
        }
        else{
            return type === this.selectType;
        }
    }

}

}

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/106606.html

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

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

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

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

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

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

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

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

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