uniapp:使用mescroll实现左导航,右数据(数据带分页)
{{item.name}} {{item.title}} ¥ {{item.price}} let systemInfo = uni.getSystemInfoSync(); import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js"; export default { mixins: [MescrollMixin], // 使用mixin data() { 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 H5 this.mescrollTop = systemInfo.statusBarHeight+height+'px'; // #endif // #ifdef H5 this.mescrollTop = height+'px'; // #endif this.$http.post('/api/goodsSortList').then(res=>{ if(res.code == 200){ this.navList = res.data this.id = this.navList[0].id this.mescroll.resetUpScroll(); } }) }, methods: { /*下拉刷新的回调*/ downCallback() { this.mescroll.resetUpScroll(); }, /*上拉加载的回调*/ upCallback(page) { if(this.id == '') return this.$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 = id this.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(); }) } } } .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; }
mescroll-uni 需要定位
兼容H5 APP 小程序
文章版权声明:除非注明,否则均为主机测评原创文章,转载或复制请以超链接形式并注明出处。