資訊專欄INFORMATION COLUMN
摘要：實(shí)現(xiàn)選項(xiàng)卡評(píng)論切換一中的數(shù)據(jù)結(jié)構(gòu)如下說明選項(xiàng)卡有的三個(gè)狀態(tài)全部推薦吐槽以的值來區(qū)分全部是選中的狀態(tài)推薦是選中的狀態(tài)吐槽是選中的狀態(tài)以來對(duì)選中的狀態(tài)進(jìn)行標(biāo)記以對(duì)文字信息進(jìn)行標(biāo)記組件部分全部全部推薦
實(shí)現(xiàn)選項(xiàng)卡評(píng)論切換
(一)
data.json中"ratings"的數(shù)據(jù)結(jié)構(gòu)如下：
說明：
選項(xiàng)卡有的三個(gè)狀態(tài)全部/推薦/吐槽
以selectType的值來區(qū)分
selectType=2---"全部"是選中的狀態(tài)
selectType=0---"推薦"是選中的狀態(tài)
selectType=1---"吐槽"是選中的狀態(tài)
以class="active"來對(duì)選中的狀態(tài)進(jìn)行標(biāo)記
以"desc"對(duì)文字信息進(jìn)行標(biāo)記
ratingselect.vue組件template部分
SCRIPT部分：
(二)父組件部分food.vue
分為選項(xiàng)卡切換(引入前面的組件)，和列表展示兩部分
template部分：
商品評(píng)價(jià)
![]()
{{rating.rateTime |formateDate}}{{rating.text}}
SCRIPT部分
//默認(rèn)展示全部評(píng)價(jià)
const ALL=2;
export default{
props:{
food:{
type:Object
}
},
data(){
return{
showFlag:false,
selectType:ALL,
onlyContent:true,
desc:{
all:"全部",
positive:"推薦",
negative:"吐槽"
}
};
}
methods:{
//show方法由父組件點(diǎn)擊觸發(fā)執(zhí)行
show(){
this.showFlag=true;
//默認(rèn)全部的選項(xiàng)卡是選中的狀態(tài);展示全部的評(píng)價(jià)
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:點(diǎn)擊時(shí)哪一項(xiàng)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;
}
//選項(xiàng)卡的選中狀態(tài)是“ALL”,列表展示
if(this.selectType===ALL){
return true;
}
else{
return type === this.selectType;
}
}
}
}
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/106606.html
摘要：三底部選項(xiàng)卡切換頁面底部選項(xiàng)卡的切換，可以說是的標(biāo)志之一。兩種模式的顯示效果差不多，如下圖可見兩種模式的區(qū)別顧名思義，模式是將所有子頁面的內(nèi)容，分別放置到主頁不同的中，當(dāng)我們點(diǎn)擊主頁的不同選項(xiàng)卡時(shí)，切換不同的顯示。 概 述 JRedu 在上一篇博客中，我們學(xué)習(xí)了如何使用Hbuilder創(chuàng)建一個(gè)APP，同時(shí)如何使用MUI搭建屬于自己的第一款A(yù)PP，沒有學(xué)習(xí)的同學(xué)可以戳鏈接學(xué)習(xí)： http...
摘要：選項(xiàng)卡回憶上次上次有三種批量替換，分別是執(zhí)行的可以用按順序增加分別對(duì)應(yīng)的窗口緩存文件參數(shù)文件各有各自的列表切換刪除增加的方式以什么開始結(jié)束的模式關(guān)于窗口容器我們切得越細(xì)可用的范圍越小總共的屏幕資源很快就用完了我又想多線程訪問又想 tab選項(xiàng)卡回憶上次上次有三種批量替換，分別是:windo:bufdo:argdo...
摘要：利用錨點(diǎn)的思想可以實(shí)現(xiàn)一個(gè)簡單的選項(xiàng)卡切換效果。其原理就是在每個(gè)列表里塞入一個(gè)肉眼看不見的輸入框，然后選項(xiàng)卡按鈕變成元素，并通過屬性與輸入框的相關(guān)聯(lián)，這樣，點(diǎn)擊選項(xiàng)按鈕會(huì)觸發(fā)輸入框的行為，觸發(fā)錨點(diǎn)定位，實(shí)現(xiàn)選項(xiàng)卡切換效果。 利用錨點(diǎn)的思想可以實(shí)現(xiàn)一個(gè)簡單的選項(xiàng)卡切換效果。頁面布局及樣式： 1 2 3 4 1 2 3 4 ...... .bo...
摘要：學(xué)習(xí)摘要定位實(shí)例學(xué)習(xí)摘要定位實(shí)例注全文摘自定位實(shí)例列表消息盒子列表消息盒子我們研究的第一個(gè)例子是一個(gè)經(jīng)典的選項(xiàng)卡消息框，你想用一塊小區(qū)域包括大量信息時(shí)，一個(gè)非常常用的特征。刪除你的不需要居中顯示，添加定位調(diào)整屬性把她粘在瀏覽器的視域。CSS學(xué)習(xí)摘要-定位實(shí)例 注：全文摘自MDN-CSS定位實(shí)例 列表消息盒子 我們研究的第一個(gè)例子是一個(gè)經(jīng)典的選項(xiàng)卡消息框，你想用一塊小區(qū)域包括大量信息時(shí)，一個(gè)非...
閱讀 2442·2021-11-22 14:56
閱讀 1239·2019-08-30 15:55
閱讀 3266·2019-08-29 13:29
閱讀 1421·2019-08-26 13:56
閱讀 3644·2019-08-26 13:37
閱讀 618·2019-08-26 13:33
閱讀 3408·2019-08-26 13:33
閱讀 2298·2019-08-26 13:33
