<template><view class="u-wrap"><u-navbar title="复购" :is-back="false" :border-bottom="false" title-color="#282828"></u-navbar><view class="u-menu-wrap"><scroll-view scroll-y scroll-with-animation class="u-tab-view menu-scroll-view" :scroll-top="scrollTop"><view v-for="(item,index) in navList" :key="index" class="u-tab-item" :class="[current==index ? 'u-tab-item-active' : '']":data-current="index" @tap.stop="swichMenu(index,item.id)"><text class="u-line-1">{{item.name}}</text></view></scroll-view><mescroll-uni ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :fixed="true" :top="mescrollTop" class="mescroll"><view class="right-box"><view class="page-view"><view class="class-item"><view class="item-container"><view class="thumb-box" v-for="(item, index) in goodsList" :key="index" @click="$go(2,'/pages/mall/goodsDetail?goods_id='+item.id)"><image class="item-menu-image" :src="item.image" mode=""></image><view class="fsz-26 u-line-1 mb-10">{{item.title}}</view><view class=""><text class="fsz-22 color-red">￥</text><text class="fsz-28 color-red">{{item.price}}</text></view></view></view></view></view></view></mescroll-uni></view></view>
</template><script>let systemInfo = uni.getSystemInfoSync();import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";export default {mixins: [MescrollMixin], // 使用mixindata() {return {scrollTop: 0, //tab标题的滚动条位置current: 0, // 预设当前项的值menuHeight: 0, // 左边菜单的高度menuItemHeight: 0, // 左边菜单item的高度navList:[],goodsList:[],id:'',mescrollTop:'44px',}},onLoad() {let height = systemInfo.platform == 'ios' ? 44 : 48;// #ifndef H5this.mescrollTop = systemInfo.statusBarHeight+height+'px';// #endif// #ifdef H5this.mescrollTop = height+'px';// #endifthis.$http.post('/api/goodsSortList').then(res=>{if(res.code == 200){this.navList = res.datathis.id = this.navList[0].idthis.mescroll.resetUpScroll();}})},methods: {/*下拉刷新的回调*/downCallback() {this.mescroll.resetUpScroll();},/*上拉加载的回调*/upCallback(page) {if(this.id == '') returnthis.$http.post('/api/getGoods', {page: page.num,sort_id:this.id}).then(res => {if (res.code == 200) {let arr = res.data.data;if (page.num === 1) this.goodsList = [];this.goodsList = this.goodsList.concat(arr);this.$nextTick(() => {this.mescroll.endSuccess(arr.length)})}}).catch((e) => {this.mescroll.endErr();});},// 点击左边的栏目切换async swichMenu(index,id) {if(index == this.current) return ;this.id = idthis.mescroll.resetUpScroll();this.current = index;// 如果为0，意味着尚未初始化if(this.menuHeight == 0 || this.menuItemHeight == 0) {await this.getElRect('menu-scroll-view', 'menuHeight');await this.getElRect('u-tab-item', 'menuItemHeight');}// 将菜单菜单活动item垂直居中this.scrollTop = index * this.menuItemHeight + this.menuItemHeight / 2 - this.menuHeight / 2;},// 获取一个目标元素的高度getElRect(elClass, dataVal) {new Promise((resolve, reject) => {const query = uni.createSelectorQuery().in(this);query.select('.' + elClass).fields({size: true},res => {// 如果节点尚未生成，res值为null，循环调用执行if(!res) {setTimeout(() => {this.getElRect(elClass);}, 10);return ;}this[dataVal] = res.height;}).exec();})}}}
</script><style lang="scss" scoped>.u-wrap {height: calc(100vh - var(--window-bottom));display: flex;flex-direction: column;}.u-search-box {padding: 18rpx 30rpx;}.u-menu-wrap {flex: 1;display: flex;overflow: hidden;}.u-search-inner {background-color: rgb(234, 234, 234);border-radius: 100rpx;display: flex;align-items: center;padding: 10rpx 16rpx;}.u-search-text {font-size: 26rpx;color: $u-tips-color;margin-left: 10rpx;}.u-tab-view {width: 200rpx;height: 100%;}.u-tab-item {height: 110rpx;background: #fff;box-sizing: border-box;display: flex;align-items: center;justify-content: center;font-size: 26rpx;color: #444;font-weight: 400;line-height: 1;}.u-tab-item-active {position: relative;color: #fff;font-size: 30rpx;font-weight: 600;background: #FF770F;}.u-tab-item-active::before {content: "";position: absolute;border-left: 4px solid #FF770F;height: 32rpx;left: 0;top: 39rpx;}.u-tab-view {height: 100%;}.right-box{width: 550rpx;}/deep/.mescroll{width: 550rpx;border: 1px solid red;.mescroll-uni{width: 550rpx;right: 0;left: auto;}}.page-view {padding-bottom: 1rpx;}.class-item {margin-bottom: 30rpx;}.item-container {display: flex;flex-wrap: wrap;}.thumb-box {width: 240rpx;height: 335rpx;margin-top: 20rpx;margin-left: 25rpx;background: #fff;border-radius: 10rpx;padding: 20rpx;}.item-menu-image {display: block;margin: 0 auto 15rpx;width: 204rpx;height: 204rpx;}
</style>mescroll-uni 需要定位
兼容H5 APP 小程序
