这篇文章上次修改于 1509 天前,可能其部分内容已经发生变化,如有疑问可询问作者。 ####state里面初始化每个盒子位置 ```javascript state = {, selectTab: 'shopBox', // 选中的盒子id selectActive: '', // 选中的标签 isShowTab: false, // 是否显示tab shopBoxTop: 0, // 盒子位置 payNotesTop: 0, shopDetailTop: 0, } ``` ####初始化定时器, ```javascript public tabTime: any = null // 初始化定时器 public scrollH: number = 0 ``` ####获取位置 ```javascript componentDidMount() { this.setHeight() } componentDidHide() { if (this.tabTime) { clearTimeout(this.tabTime) } } // 获取每个盒子位置 setHeight() { this.tabTime = setTimeout(() => { new Promise(resolve => { let query = Taro.createSelectorQuery(); query.select('#shopBox').boundingClientRect(); query.select('#payNotes').boundingClientRect(); query.select('#shopDetail').boundingClientRect(); query.exec(function (res) { resolve(res); }); }).then((res: any) => { this.setState({ shopBoxTop: res[0].top, payNotesTop: res[1].top, shopDetailTop: res[2].top, }) }); }, 600); } ``` ####监听滚动 ```javascript // 监听滚动式选中对应标签 onScroll(e) { if (!this.state.shopDetailTop) { this.setHeight() return false } const scrollTop: number = Math.floor(e.detail.scrollTop) + 50 let selectTab: any = 'shopBox' if (scrollTop >= 300) { if (scrollTop >= +this.state.shopBoxTop) { selectTab = 'shopBox' } if (scrollTop >= +this.state.payNotesTop) { selectTab = 'payNotes' } if (scrollTop >= this.state.shopDetailTop) { selectTab = 'shopDetail' } let timer = setTimeout(() => { this.setState({ isShowTab: true, selectTab: selectTab }) clearTimeout(timer) return; }, 1000) } else { this.setState({ isShowTab: false }) } } ``` ####html代码 ```html {/*顶部tab栏*/} this.setState({ selectActive: 'shopBox', selectTab: 'shopBox' })} > 商品 this.setState({ selectActive: 'payNotes', selectTab: 'payNotes' })} > 购买须知 this.setState({ selectActive: 'shopDetail', selectTab: 'shopDetail' })} > 商品详情 {/*轮播图*/} { data.pictureList.map((v, index) => ( )) } {/*价格*/} ¥ {data.price} ¥{data.marketPrice} {/*会员价*/} 会员立减{(data.price - data.memberPrice).toFixed(2)}元 {/*喜欢人数量*/} {data.browerVol}人喜欢 {/*名称*/} {data.goodsName} { data.isSaleShow && ( 已售{data.saleVol}件 ) } {/*优惠*/} { data.isUserRed && ( 红包优惠 ) } { data.isGift && ( 可转赠 ) } {/*购买须知*/} 购买须知 { data.buyNotice && ( /g, '\div>').replace(/files\//gi, `${base_url}/files/`)} /> ) } {/*商品详情*/} 商品详情 { data.goodsInfo && ( /g, '\div>').replace(/\ ) } {/*价格说明*/} { data.priceExplain && ( 价格说明 /g, '\div>').replace(/files\//gi, `${base_url}/files/`)} /> ) } ```
已有 2 条评论