购物车

整页模板，可Ctrl+A复制完整粘贴

<template> <view> <view class="search_top"> <u-search placeholder="搜索商品名称" v-model="keyword" :showAction="false"></u-search> </view> <view class="flex"> <scroll-view class="left_area" scroll-y> <view class="left_item" :class="{'left_item_active': current === item.id}" @click="left_click(item.id)" v-for="(item, index) in category_list" :key="index">{{ item.cate_name }}</view> </scroll-view> <scroll-view class="right_area" :scroll-into-view="intoindex" scroll-y @scroll="scroll_right" scroll-with-animation> <view class="right_item" v-for="(item, index) in category_list" :key="index" :id="'id' + item.id"> <view class="flex-center" style="line-height: 100rpx;margin-bottom: 26rpx;"> <view class="line" style="margin-right: 32rpx;"></view> <view class="right_item font-bold">{{ item.cate_name }}</view> <view class="line" style="margin-left: 32rpx;"></view> </view> <view class="product"> <view class="flex-column" @click="toNav(`/pages/goods/goods_list?title=${item.cate_name}&sid=0&cid=${item.id}`)"> <image src="http://tools.k.zentaotech.com/img/all_product.png" style="width: 120rpx;height: 120rpx;"></image> <view class="font-24" style="height: 56rpx;line-height: 58rpx;">全部商品</view> </view> <view class="flex-column" v-for="(item2, index2) in item.children" :key="index2" @click="toNav(`/pages/goods/goods_list?title=${item2.cate_name}&sid=${item2.id}&cid=0`)"> <image :src="item2.pic" style="width: 120rpx;height: 120rpx;"></image> <view class="font-24" style="height: 56rpx;line-height: 58rpx;">{{ item2.cate_name }}</view> </view> </view> </view> </scroll-view> </view> </view> </template> <script> export default { data() { return { category_list: [], current: 1, intoindex: "", category_height_list: [], category_height_list_reverse: [], scroll_flag: true } }, onLoad() { this.get_category_list() }, onShow() { // this.cart_cout() }, methods: { get_category_list() { uni.request({ url: `http://tools.k.zentaotech.com/json/category.php`, method: 'post', header: { 'content-type': 'application/json' }, success: (res) => { console.log(res.data); this.category_list = res.data.data this.$nextTick(() => { const that = this this.category_list.map(item => { uni.createSelectorQuery().select(`#id${item.id}`) .boundingClientRect(function(rect) { that.category_height_list.unshift({ top: rect.top, id: item.id }) }).exec() }) }) console.log(this.category_height_list); } }) }, left_click(id) { this.scroll_flag = false this.current = id this.intoindex = 'id' + id }, scroll_right(e) { this.$nextTick(() => { if (this.category_height_list.length > 0 && this.scroll_flag) { let a = 1 for (let i = 0; i < this.category_height_list.length; i++) { if (e.detail.scrollTop.toFixed(0) > this.category_height_list[i].top - 60) { a = this.category_height_list[i].id break } } this.current = a } this.scroll_flag = true }) }, fn_reverse(arr) { let ary = [] for (let i = arr.length - 1; i >= 0; i--) { ary[ary.length] = arr[i] } return ary } } } </script> <style lang="scss"> .search_top { width: 100%; height: 100rpx; border-bottom: 0.5px solid #f5f5f5; padding: 0 24rpx; box-sizing: border-box; display: flex; align-items: center; } .left_area { width: 200rpx; height: calc(100vh - 100rpx); background-color: #f7f7f7; .left_item { width: 100%; height: 110rpx; display: flex; justify-content: center; align-items: center; font-size: 28rpx; box-sizing: border-box; } .left_item_active { background-color: #FFF; border-left: 2px solid #E93323; font-weight: 700; color: #E93323; box-sizing: border-box; } } .right_area { flex: 1; height: calc(100vh - 100rpx); .line { width: 110rpx; height: 2rpx; background-color: #f0f0f0; } .right_item { color: #333; font-size: 30rpx; } .right_item:first-child { padding-top: 0; } .product { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 20rpx; } } </style>