1***@qq.com
1***@qq.com
  • 发布:2022-07-14 09:23
  • 更新:2022-09-20 06:14
  • 阅读:528

scroll-view 点击左侧菜单,右侧滚动第一次失效,第二次才能生效,本人小白,跪求解决。

分类:uni-app
<!-- 左侧分类导航 -->  
    <scroll-view :scroll-top="menuScrollTop" :scroll-y="goodsBoxScroll" class="left" >                       
    <view v-for="(item,index) in categoryList" :key="index"  class="row" :class="{ active: item.id == menuCurrentId }"   
             @click="showCategory(item)" >  
<view class="text">{{item.name}}</view>  
    </view>  
    </scroll-view>    
    <!-- 右侧子导航 -->  
<scroll-view scroll-with-animation :scroll-y="goodsBoxScroll" class="right" @scroll="asideScroll" :scroll-   
     top="tabScrollTop">  
<view class="goodsListBox">  
<view class="category" v-for="item in categoryList" :key="item.id" :id="'goodsBox' + item.id" >  

data() {  
        return {  

            value:0,  
            rightId: 'right0',  
            leftView: 0,  
            pageScroll:{},  
            //商家信息  
            storeData: {},  
            //商品列表  
            goodsList: [],  
            //商家ID  
            id:0,  
            buttonSize: 36,  
            bgColor: '#fff',  
            //选中值  
            selectTure:{},  
            //商品分类信息列表  
            categoryList: [],  
            //评论列表  
            commentList: [],  

            navSearchWidth: 3,  
            navSearchBgOpacity: 0,  
            navSearchColor: '#ffffff',  
            navHeadHeight: 44,  
            //默认禁止商品栏滚动  
            goodsBoxScroll: true,  
            statusBarHeight,  
            //动画时间  
            animaTime: 100,  
            itemId: '', // 栏目右边scroll-view用于滚动的id  
            //商家盒子高度  
            storeInfoBoxHeight: 100,  
            //展开门店信息容器  
            showStoreBox: false,  
            current: 0, // 预设当前项的值  
            num:1,  
            element: [],                  
            cartAnimation: {},  
            cartAnimationData: {},  

            //tabs  
            tabs: [  
                {name:'购物'},  
                {name:'评价'},  
                {name:'商家'},  
            ],  
            swiperCurrent: 0,  
            dx: 0,  
            swiperCurrentSliderLeft: 0,  
            transtionTime:100,  

            //所有购物车  
            shoppingCartAll:[],  
            //显示购物车  
            showFoot:true,  

            //配送费  
            shippingDees: 0,  
            //配送起步价  
            startingPrice:0,  
            arr: [],  

            //购物车商品价格合计  
            goodsTotalPrice: 0,  
            //购物车商品数量合计  
            goodsTotalNumber: 0,  
            //当前门店购物车  
            shoppCart: [],  
            //foot 高度  
            footHeight: '0',  
            scrollRightTop: 0, // 右边栏目scroll-view的滚动条高度  
            //显示购物车  
            showCar: false,  
            //购物车中商品滚动条位置  
            carGoodsScrollTop: 0,  
            //购物车缓存 Storage 名称  
            shoppingCartStorageName: 'shopping_cart',  

            sizeCalcState: false,  
            tabScrollTop: 0,  

            mainHeight: 0,  
            menuCurrentId:0,  

            //购物车显示折扣  
            showDiscount:true,  
            //手指触摸滑动  
            touchData:{},  
            //页面滚动条距离顶部的距离  
            pageScrollTop: 0,  

            menuScrollTop: 0,  
            oldScrollTop: 0,  

            //多规格当前产品  
            currentGoodsData: {},  
            //显示规格容器  
            showFormBox: false,  
            //显示规格动画  
            formAnimationData:{},  
            scrollTop: 0, //tab标题的滚动条位置  

            //购物车位置数据  
            cartBasketRect:{},  

            navStatus: true,  
            isBack:true,  
        }  
    },  

//一级分类点击
showCategory(item) {
const that = this;
// 根据分类查food
that.findFoodListByCateId(item.id);

            that.goodsBoxScroll = true;  
            that.calcSize().then(res => {  
                that.menuCurrentId = item.id;  
                let index = that.categoryList.findIndex(sitem => sitem.id === item.id);  
                that.tabScrollTop = that.categoryList[index].top + 1;  
                console.log(that.tabScrollTop)  
            });  
          },  
                      /**  
                       * 右侧滚动事件  
                       */  
                     asideScroll(e) {  
                         const that = this;  
                         that.oldScrollTop = e.detail.scrollTop  
                         const scrollTop = Math.round(e.detail.scrollTop);  
                         const tabs = that.categoryList.filter(item => item.top <= scrollTop).reverse();  
                         if (tabs.length > 0) {  
                            that.menuCurrentId = tabs[0].id;  
                         }  
                         const menuNum = that.categoryList.length;  
                         const cNum = tabs.length;  
                         // 定位在第4个分类,当分类滑动到第4格时将不再变换位置。  
                         const n = 4;  
                         if (cNum > n) {  
                            that.menuScrollTop = (cNum - n) * 45;  
                         } else {  
                            that.menuScrollTop = 0;  
                        }  
                     },  
                    //计算右侧栏每个tab的高度等信息  
                    calcSize(event) {  
                        debugger  
                        const that = this;  
                        return new Promise(function(resolve, reject) {  
                            let h = 0;  
                            // if(this.sizeCalcState){  
                            //  return false  
                            // }  

                            that.categoryList.forEach(item => {  

                                let view = uni.createSelectorQuery().select('#goodsBox' + item.id);  
                                view.fields(  
                                    {  
                                        size: true  
                                    },  
                                    data => {  
                                        if (data != null) {  
                                            item.top = h;  
                                            h += Math.round(data.height);  
                                            item.bottom = h;  
                                        }  
                                    }  
                                ).exec();  
                            });  
                            resolve(true);  
                            that.sizeCalcState = true;  
                            console.log(that.categoryList)  
                        });  
                    },
2022-07-14 09:23 负责人:无 分享
已邀请:
1***@qq.com

1***@qq.com (作者)

工作人员可以帮忙看一下吗?

1***@163.com

1***@163.com - 你只需要好好努力,剩下的教给时间!

你解决了吗?

该问题目前已经被锁定, 无法添加新回复