网站建设86215公司一般费用是多少?
摘要:网站建设86215,网站建设公司一般多少钱,淘宝客网站设计,城市建设服务中心网站文章目录12-二级类目-结果区-排序组件13-二级类目-结果区-数据加载14-二级类目-结果区-进行筛选12-二级类目-结果区-排序组件 目的&
网站建设86215,网站建设公司一般多少钱,淘宝客网站设计,城市建设服务中心网站文章目录12-二级类目-结果区-排序组件13-二级类目-结果区-数据加载14-二级类目-结果区-进行筛选12-二级类目-结果区-排序组件 目的#xff1a;封装排序组件#xff0c;完成排序切换效果 大致步骤#xff1a;
定义一个组件 sub-sort#xff0c;完成基础布局在 sub.vue 组件…
文章目录12-二级类目-结果区-排序组件13-二级类目-结果区-数据加载14-二级类目-结果区-进行筛选12-二级类目-结果区-排序组件 目的封装排序组件完成排序切换效果 大致步骤
定义一个组件 sub-sort完成基础布局在 sub.vue 组件使用完成切换排序时候的交换效果
落地代码
1基础布局 src/views/category/components/sub-sort.vue
templatediv classsub-sortdiv classsorta hrefjavascript:;默认排序/a a hrefjavascript:;最新商品/aa hrefjavascript:;最高人气/aa hrefjavascript:;评论最多/aa hrefjavascript:;价格排序i classarrow up /i classarrow down //a/divdiv classcheckXtxCheckbox仅显示有货商品/XtxCheckboxXtxCheckbox仅显示特惠商品/XtxCheckbox/div/div
/template
script
export default {name: SubSort
}
/script
style scoped langless
.sub-sort {height: 80px;display: flex;align-items: center;justify-content: space-between;.sort {display: flex;a {height: 30px;line-height: 28px;border: 1px solid #e4e4e4;padding: 0 20px;margin-right: 20px;color: #999;border-radius: 2px;position: relative;transition: all .3s;.active {background: xtxColor;border-color: xtxColor;color: #fff;}.arrow {position: absolute;border: 5px solid transparent;right: 8px;.up {top: 3px;border-bottom-color: #bbb;.active {border-bottom-color: xtxColor;}}.down {top: 15px;border-top-color: #bbb;.active {border-top-color: xtxColor;}}}}}.check {.xtx-checkbox {margin-left: 20px;color: #999;}}
}
/style使用组件src/views/category/sub.vue
templatediv classsub-categorydiv classcontainer!-- 面包屑 --SubBread /!-- 筛选区 --SubFilter /!-- 结果区域 --div classgoods-list!-- 排序 --SubSort /!-- 列表 --/div/div/div
/templatescript
import SubBread from ./components/sub-bread
import SubFilter from ./components/sub-filter
import SubSort from ./components/sub-sort
export default {name: SubCategory,components: { SubBread, SubFilter, SubSort}
}
/scriptstyle scoped langless
.goods-list {background: #fff;padding: 0 25px;margin-top: 25px;
}
/style2交互效果
templatediv classsub-sortdiv classsorta :class{active:sortParams.sortFieldnull} clic
