资讯专栏INFORMATION COLUMN

选项卡学习

asce1885 / 1296人阅读

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

实现选项卡评论切换

(一)
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;
        }
    }

}

}

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

转载请注明本文地址:https://www.ucloud.cn/yun/106606.html

相关文章

  • MUI框架开发HTML5手机APP(二)--页面跳转传值&底部选项切换

    摘要:三底部选项卡切换页面底部选项卡的切换,可以说是的标志之一。两种模式的显示效果差不多,如下图可见两种模式的区别顾名思义,模式是将所有子页面的内容,分别放置到主页不同的中,当我们点击主页的不同选项卡时,切换不同的显示。 概 述 JRedu   在上一篇博客中,我们学习了如何使用Hbuilder创建一个APP,同时如何使用MUI搭建属于自己的第一款APP,没有学习的同学可以戳链接学习: http...

    番茄西红柿 评论0 收藏0
  • oeasy教您玩转vim - 68 - # 标签页tab

    摘要:选项卡回忆上次上次有三种批量替换,分别是执行的可以用按顺序增加分别对应的窗口缓存文件参数文件各有各自的列表切换删除增加的方式以什么开始结束的模式关于窗口容器我们切得越细可用的范围越小总共的屏幕资源很快就用完了我又想多线程访问又想 tab选项卡回忆上次上次有三种批量替换,分别是:windo:bufdo:argdo...

    pkwenda 评论0 收藏0
  • 深度学习matlab图像分类,手把手教程系列

    摘要:等待深度网络设计器将显示整个网络的缩小视图。指定要对训练图像执行的增强操作。深度网络设计器会在训练期间调整图像大小,以匹配网络输入大小。如果报告零错误,则表示网络已准备就绪,可以开始训练。使用经过训练的网络对测试图像进行分类。 ...

    paney129 评论0 收藏0
  • 简单的选项切换效果

    摘要:利用锚点的思想可以实现一个简单的选项卡切换效果。其原理就是在每个列表里塞入一个肉眼看不见的输入框,然后选项卡按钮变成元素,并通过属性与输入框的相关联,这样,点击选项按钮会触发输入框的行为,触发锚点定位,实现选项卡切换效果。 利用锚点的思想可以实现一个简单的选项卡切换效果。页面布局及样式: 1 2 3 4 1 2 3 4 ...... .bo...

    xiaoqibTn 评论0 收藏0
  • CSS学习摘要-定位实例

    摘要:学习摘要定位实例学习摘要定位实例注全文摘自定位实例列表消息盒子列表消息盒子我们研究的第一个例子是一个经典的选项卡消息框,你想用一块小区域包括大量信息时,一个非常常用的特征。删除你的不需要居中显示,添加定位调整属性把她粘在浏览器的视域。CSS学习摘要-定位实例 注:全文摘自MDN-CSS定位实例 列表消息盒子 我们研究的第一个例子是一个经典的选项卡消息框,你想用一块小区域包括大量信息时,一个非...

    kuangcaibao 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<