uni |
您所在的位置：网站首页 › vue做选项卡 › uni |
uni
|
选项卡切换
首先增加click，传入点击的项目和index。 下面的method中对应添加clickTab。 然后增加动态绑定class,这里注意动态绑定class只能绑定一个。写法是 :class. {{item.name}} methods:{ clickTab(item,index){ console.log(item,index) this.activeIndex = index //将当期点击的index赋给 } }
修改方法在下图，在子组件点击的里面增加发送，父组件将它和tab_update绑定，在里面进行处理。这里暂时是log. 新建组件及同名文件夹 list-scroll.vue 里面代码如下 export default { data() { return { }; } } .scroll{ flex:1; height: 100%; // 溢出隐藏,清除浮动 overflow: hidden; box-sizing: border-box; .list-scroll{ height: 100%; display: flex; flex-direction: column; } }index.vue相关代码。注意page前面没有点。page意思是当前页面的父节点。 到此为止，实现了主页上下滚动而选项卡不隐藏的效果，如下。
这个还是挺复杂的。创建了list-card组件。主要是调整格式。直接上代码理解吧。太多细节了。 index.vue使用的地方 list-card.vue uni-app开发框架开发框架开发框架开发框架开发框架开发框架开发框架开发框架开发框架开发框架 为了查看文本超过两行自动隐藏而加的文字 前端 120浏览 export default { data() { return { }; } } .listcard{ display: flex; padding: 10px; margin:10px; border-radius: 5px; box-shadow: 0 0 5px rgba($color: #000000, $alpha: 1.0); box-sizing: border-box; .listcard-image{ // 不让图片被挤压 flex-shrink: 0; width:60px; height: 60px; border-radius: 5px; overflow: hidden; image{ width:100%; height: 100%; } } .listcard-content{ display: flex; flex-direction: column; justify-content: space-between; padding-left: 10px; width:100%; .listcard-content_title{ padding-right: 30px; font-size: 14px; color: #333; font-weight: 400; line-height: 1.2; // 下面的text是做溢出隐藏 text{ overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; } } .listcard-content_des{ display: flex; justify-content: space-between; font-size: 12px; .listcard-content_des-label{ display: flex; .listcard-content_des-label-item{ padding: 0 5px; margin-right: 5px; border-radius: 15px; color: $mk-base-color; border: 1px $mk-base-color solid; } } .listcard-content_des-label-browse{ color: #999999; line-height: 1.5; } } } }效果
|
这里要注意的是 &的写法。解释如下。就是给tab-scroll_item增加属性。 sass的快速入门，这篇文章写得很好：http://www.ruanyifeng.com/blog/2012/06/sass.html
至此，实现了点击选项卡，对应的选项变红的效果。
display: flex; //将对象作为弹性伸缩盒显示 flex-direction: row; // 调整主轴方向 flex: 1; // 自动放大,占满剩余空间
没有出结果的时候，一定要刷新看一下。有时候是保存完就更新显示，但有时候不是的。
【本文地址】