UNIAPP实战项目笔记24 商品分类获取高度和点击添加样式 商品分类对应数据渲染

商品分类获取高度和点击添加样式

商品分类对应数据渲染

接口数据整理并渲染

将读取到接口的数据,分类成两个数据;LeftData和rightData
用onReady生命周期自动获取并计算 可是区域高度
list.vue

<template><view class=""><Lines /><view class="list"><!-- 左侧滑动 --><scroll-view scroll-y="true" class="list-left" :style="'height:'+clentHeight+'px'"><view v-for="(item,index) in leftData"@tap="changeLeftTab(index,item.id)" class="left-item"><view class= "left-name":class='activeIndex===index?"left-name-active":""'>{{item.name}}</view></view></scroll-view><!-- 右侧滑动 --><scroll-view scroll-y="true" class="list-right" :style="'height:'+clentHeight+'px'"><view class="right-list" v-for="(item,index) in rightData":key="index"><block v-for="(k,i) in item"><view class="list-title">{{k.name}}</view><view class="right-content"><view class="right-item" v-for="(j,idx) in k.list"><image class="right-img" :src="j.imgUrl" mode=""></image><view class="right-name">{{j.name}}</view></view></view></block></view></scroll-view></view></view>
</template><script>import $http from '@/common/api/request.js'import Lines from "@/components/common/Lines.vue"export default {data() {return {clentHeight:0,activeIndex:0,// 左侧数据leftData:[],rightData:[],}},components:{Lines},onLoad() {this.getData();},onReady() { // 初步渲染完后执行// 获取可视高度uni.getSystemInfo({success: (res) => {// 可视区域高度 减去头部高度this.clentHeight = res.windowHeight - this.getClientHeight();}})},methods: {// 请求数据方法getData(id){if(id === this.activeIndex+1){return;}$http.request({url:'/goods/list'}).then((res)=>{let leftData = [];let rightData = [];res.forEach(v=>{leftData.push({id:v.id,name:v.name})// 如果点击的id值相投if(v.id=== (this.activeIndex+1)){rightData.push(v.data);}})this.leftData = leftData;this.rightData = rightData;console.log(rightData);}).catch(()=>{uni.showToast({title:'请求失败',icon:'none'})})},// 获取可视区域高度【兼容】getClientHeight(){const res = uni.getSystemInfoSync();console.log(res.platform,res.statusBarHeight);const system = res.platform;if ( system === 'iso') {return 44 + res.statusBarHeight;}else if( system === 'android' ){return 48 + res.statusBarHeight;} else{return 0;}},// 左侧点击事件changeLeftTab(index,id){this.getData(id);this.activeIndex = index;},},// input 输入框dia点击事件onNavigationBarSearchInputClicked() {uni.navigateTo({url:'/pages/search/search'})}}
</script><style lang="scss">
.list{display: flex;
}
.list-left{width: 200rpx;
}
.left-item{border-bottom:2rpx solid #ffffff;font-size: 28rpx;font-weight: bold;background-color: #F7F7F7;
}
.left-name{padding: 30rpx 6rpx;text-align: center;
}
.left-name-active{border-left:8rpx solid #49bdfb;background-color: #ffffff;
}
.list-right{flex: 1;
}
.list-title{font-weight: bold;padding: 30rpx 0;
}
.right-content{display: flex;flex-wrap: wrap;
}
.right-item{width: 150rpx;display: flex;flex-direction: column;align-items: center;justify-content: center;padding: 10rpx;
}
.right-name{padding:16rpx 0;
}
.right-img{width: 150rpx;height: 150rpx;
}
</style>

实例效果图

后端接口文件

index.js

var express = require('express');
var router = express.Router();
var connection = require('../db/sql.js');/* GET home page. */
router.get('/', function(req, res, next) {res.render('index', { title: 'Express' });
});/* GET List Page */
router.get('/api/goods/list', function(req, res, next) {res.send({code:0,name:"家居家纺",data:[{id:1,name:"家纺",data:[{name:"家纺",list:[{id:1,name:"毛巾/浴巾",imgUrl:"/static/logo.png"},{id:2,name:"枕头",imgUrl:"/static/logo.png"}]},{name:"生活用品",list:[{id:1,name:"浴室用品",imgUrl:"/static/logo.png"},{id:2,name:"洗晒",imgUrl:"/static/logo.png"}]}]},{id:2,name:"女装",data:[{name:"裙装",list:[{id:1,name:"连衣裙",imgUrl:"/static/logo.png"},{id:2,name:"半身裙",imgUrl:"/static/logo.png"}]},{name:"上衣",list:[{id:1,name:"T恤",imgUrl:"/static/logo.png"},{id:2,name:"衬衫",imgUrl:"/static/logo.png"}]}]}]});
});/* GET databases goods. */
router.get('/api/goods/search', function(req, res, next) {/* desc 降序 asc 升序    */// 获取对象的keylet [goodsName,orderName] = Object.keys(req.query);// name参数的值let name = req.query.name;// orderName的key值let order = req.query[orderName];let sql = "select * from goods_search";if(!(name == undefined || orderName == undefined || order == undefined)){sql = "select * from goods_search where name like '%"+name+"%' order by "+orderName+" "+order;}connection.query(sql,function(error,results,fields){res.send({code:"0",data:results});})
});/* 首页第一次触底的数据 */
router.get('/api/index_list/1/data/2', function(req, res, next) {res.send({code:"0",data:[          {type:"commodityList",data:[{id:1,imgUrl:"../../static/logo.png",name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",pprice:"299",oprice:"659",discount:"5.2"},{id:2,imgUrl:"../../static/logo.png",name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",pprice:"299",oprice:"659",discount:"5.2"},{id:3,imgUrl:"../../static/logo.png",name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",pprice:"299",oprice:"659",discount:"5.2"},{id:4,imgUrl:"../../static/logo.png",name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",pprice:"299",oprice:"659",discount:"5.2"},]},]});
});/* 运动户外第二次触底的数据 */
router.get('/api/index_list/2/data/3', function(req, res, next) {res.send({code:"0",data:[          {type:"commodityList",data:[{id:1,imgUrl:"../../static/logo.png",name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",pprice:"299",oprice:"659",discount:"5.2"},{id:2,imgUrl:"../../static/logo.png",name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",pprice:"299",oprice:"659",discount:"5.2"},{id:3,imgUrl:"../../static/logo.png",name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",pprice:"299",oprice:"659",discount:"5.2"},{id:4,imgUrl:"../../static/logo.png",name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",pprice:"299",oprice:"659",discount:"5.2"},]},]});
});/* 运动户外第一次触底的数据 */
router.get('/api/index_list/2/data/2', function(req, res, next) {res.send({code:"0",data:[          {type:"commodityList",data:[{id:1,imgUrl:"../../static/logo.png",name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",pprice:"299",oprice:"659",discount:"5.2"},{id:2,imgUrl:"../../static/logo.png",name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",pprice:"299",oprice:"659",discount:"5.2"},{id:3,imgUrl:"../../static/logo.png",name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",pprice:"299",oprice:"659",discount:"5.2"},{id:4,imgUrl:"../../static/logo.png",name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",pprice:"299",oprice:"659",discount:"5.2"},]},]});
});/* 运动户外第一次加载的数据 */
router.get('/api/index_list/2/data/1', function(req, res, next) {res.send({code:"0",data:[          {type:"bannerList",imgUrl:"../../static/img/b3.jpg",},{type:"iconsList",data:[{imgUrl:"../../static/logo.png",name:"运动户外"},{imgUrl:"../../static/logo.png",name:"运动户外"},{imgUrl:"../../static/logo.png",name:"运动户外"},{imgUrl:"../../static/logo.png",name:"运动户外"},{imgUrl:"../../static/logo.png",name:"运动户外"},{imgUrl:"../../static/logo.png",name:"运动户外"},{imgUrl:"../../static/logo.png",name:"运动户外"},{imgUrl:"../../static/logo.png",name:"运动户外"}]},{type:"hotList",data:[{id:1,imgUrl:"../../static/logo.png",name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",pprice:"299",oprice:"659",discount:"5.2"},{id:2,imgUrl:"../../static/logo.png",name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",pprice:"299",oprice:"659",discount:"5.2"},{id:3,imgUrl:"../../static/logo.png",name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",pprice:"299",oprice:"659",discount:"5.2"}]},{type:"shopList",data:[{bigUrl:"../../static/img/b3.jpg",data:[{id:1,imgUrl:"../../static/logo.png",name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",pprice:"299",oprice:"659",discount:"5.2"},{id:2,imgUrl:"../../static/logo.png",name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",pprice:"299",oprice:"659",discount:"5.2"},{id:3,imgUrl:"../../static/logo.png",name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",pprice:"299",oprice:"659",discount:"5.2"},{id:4,imgUrl:"../../static/logo.png",name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",pprice:"299",oprice:"659",discount:"5.2"}]}],},{type:"commodityList",data:[{id:1,imgUrl:"../../static/logo.png",name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",pprice:"299",oprice:"659",discount:"5.2"},{id:2,imgUrl:"../../static/logo.png",name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",pprice:"299",oprice:"659",discount:"5.2"},{id:3,imgUrl:"../../static/logo.png",name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",pprice:"299",oprice:"659",discount:"5.2"},{id:4,imgUrl:"../../static/logo.png",name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",pprice:"299",oprice:"659",discount:"5.2"},]},]});
});/* 服饰内衣第一次加载的数据 */
router.get('/api/index_list/3/data/1', function(req, res, next) {res.send({code:"0",data:[          {type:"bannerList",imgUrl:"../../static/img/b3.jpg",},{type:"iconsList",data:[{imgUrl:"../../static/logo.png",name:"服饰内衣"},{imgUrl:"../../static/logo.png",name:"服饰内衣"},{imgUrl:"../../static/logo.png",name:"服饰内衣"},{imgUrl:"../../static/logo.png",name:"服饰内衣"},{imgUrl:"../../static/logo.png",name:"服饰内衣"},{imgUrl:"../../static/logo.png",name:"服饰内衣"},{imgUrl:"../../static/logo.png",name:"服饰内衣"},{imgUrl:"../../static/logo.png",name:"服饰内衣"}]},{type:"hotList",data:[{id:1,imgUrl:"../../static/logo.png",name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",pprice:"299",oprice:"659",discount:"5.2"},{id:2,imgUrl:"../../static/logo.png",name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",pprice:"299",oprice:"659",discount:"5.2"},{id:3,imgUrl:"../../static/logo.png",name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",pprice:"299",oprice:"659",discount:"5.2"}]},{type:"shopList",data:[{bigUrl:"../../static/img/b3.jpg",data:[{id:1,imgUrl:"../../static/logo.png",name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",pprice:"299",oprice:"659",discount:"5.2"},{id:2,imgUrl:"../../static/logo.png",name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",pprice:"299",oprice:"659",discount:"5.2"},{id:3,imgUrl:"../../static/logo.png",name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",pprice:"299",oprice:"659",discount:"5.2"},{id:4,imgUrl:"../../static/logo.png",name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",pprice:"299",oprice:"659",discount:"5.2"}]}],},{type:"commodityList",data:[{id:1,imgUrl:"../../static/logo.png",name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",pprice:"299",oprice:"659",discount:"5.2"},{id:2,imgUrl:"../../static/logo.png",name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",pprice:"299",oprice:"659",discount:"5.2"},{id:3,imgUrl:"../../static/logo.png",name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",pprice:"299",oprice:"659",discount:"5.2"},{id:4,imgUrl:"../../static/logo.png",name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",pprice:"299",oprice:"659",discount:"5.2"},]},]});
});/* 首页推荐数据 */
router.get('/api/index_list/data', function(req, res, next) {res.send({"code":0,"data":{topBar:[{id:1,name:'推荐'},{id:2,name:'运动户外'},{id:3,name:'服饰内衣'},{id:4,name:'鞋靴箱包'},{id:5,name:'美妆个护'},{id:6,name:'家居数码'},{id:7,name:'食品母婴'}],data:[{type:"swiperList",data:[{imgUrl:'/static/img/b3.jpg'},{imgUrl:'/static/img/b3.jpg'},{imgUrl:'/static/img/b3.jpg'}]},{type:"recommendList",data:[{bigUrl:"../../static/img/b3.jpg",data:[{imgUrl:'../../static/logo.png'},{imgUrl:'../../static/logo.png'},{imgUrl:'../../static/logo.png'}]},{bigUrl:"../../static/img/b3.jpg",data:[{imgUrl:'../../static/logo.png'},{imgUrl:'../../static/logo.png'},{imgUrl:'../../static/logo.png'}]}]},{type:"commodityList",data:[{id:1,imgUrl:"../../static/logo.png",name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",pprice:"299",oprice:"659",discount:"5.2"},{id:2,imgUrl:"../../static/logo.png",name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",pprice:"299",oprice:"659",discount:"5.2"},{id:3,imgUrl:"../../static/logo.png",name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",pprice:"299",oprice:"659",discount:"5.2"},{id:4,imgUrl:"../../static/logo.png",name:"迪奥绒毛大衣,今年必抢,错过瞬时不爽了,爆款疯狂销售",pprice:"299",oprice:"659",discount:"5.2"},]},]}})
});module.exports = router;

目录结构

前端目录结构

• manifest.json 配置文件： appid、logo…

• pages.json 配置文件： 导航、 tabbar、 路由

• main.js vue初始化入口文件

• App.vue 全局配置：样式、全局监视

• static 静态资源：图片、字体图标

• page 页面

  • index
    • index.vue
  • list
    • list.vue
  • my
    • my.vue
  • search
    • search.vue
  • search-list
    • search-list.vue
  • shopcart
    • shopcart.vue

• components 组件

  • index
    • Banner.vue
    • Hot.vue
    • Icons.vue
    • indexSwiper.vue
    • Recommend.vue
    • Shop.vue
  • common
    • Card.vue
    • Commondity.vue
    • CommondityList.vue
    • Line.vue
    • ShopList.vue

• common 公共文件：全局css文件 || 全局js文件

  • api
    • request.js
  • common.css
  • uni.css

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！