选项卡学习

asce1885 发布于2019-08-26 10:41 / 1395人阅读

摘要：实现选项卡评论切换一中的数据结构如下说明选项卡有的三个状态全部推荐吐槽以的值来区分全部是选中的状态推荐是选中的状态吐槽是选中的状态以来对选中的状态进行标记以对文字信息进行标记组件部分全部全部推荐

实现选项卡评论切换

(一)
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选项卡

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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