ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

uni-app

2022-01-28 01:35:08  阅读:47  来源: 互联网

标签:flex res app width uni font display


// template是放置视图部分的
<template> <view> </view> </template>
// script 放置方法、数据、功能 <script> export default { data() { return { // wh: 10, cateList: [], // 遍历数组后需要先创建数据接收 cateLevel2: [], active: 0, scrollTop: 0 }; }, onl oad() { const sysInfo = uni.getSystemInfoSync() this.hw = sysInfo.windowHeight this.getCateList() }, methods: { async getCateList() { const { data:res } = await uni.$http.get('/api/public/v1/categories') if (res.meta.status !== 200) return uni.$showMsg() this.cateList = res.message // 为二级分类赋值 this.cateLevel2 = res.message[0].children }, activeChanged(i) { this.active = i this.cateLevel2 = this.cateList[i].children this.scrollTop = this.scrollTop === 0 ? 1:0 }, gotoGoodsList(item3){ uni.navigateTo({ // 点击三级分类项跳转到商品列表页面 url: '/subpkg/goods_list/goods_list?cid=' + item3.cat_id }) } } } </script>
// style放置样式 <style lang="scss"> .scroll-view-container { display: flex; .left-scroll-view { width: 120px; .left-scroll-view-item { line-height: 60px; background-color: #f7f7f7; text-align: center; font-size: 12px; // 激活项的样式 &.active { background-color: #ffffff; position: relative; // 渲染激活项左侧的红色指示边线 &::before { content: ' '; display: block; width: 3px; height: 30px; background-color: #c00000; position: absolute; left: 0; top: 50%; transform: translateY(-50%); } } } } } .cate-lv2-title{ font-size: 12px; font-weight: bold; text-align: center; padding: 15px 0; } .cate-lv3-list{ display: flex; flex-wrap: wrap; .cate-lv3-item{ width: 33.33%; margin-bottom: 10px; display: flex; flex-direction: column; align-items: center; image{ width: 60px; height: 60px; } text { font-size: 12px; } } } </style>

 

标签:flex,res,app,width,uni,font,display
来源: https://www.cnblogs.com/coderatian/p/15851716.html

专注分享技术,共同学习,共同进步。侵权联系[admin#icode9.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有