uni-app中使用錨點定位
阿新 • • 發佈:2022-12-09
.toTop{ position: fixed; z-index: 2; left: 40rpx; bottom: 40vw; width: 100rpx; height:100rpx; }
之前有一個專案,是需要點選圖片,跳轉到相應板塊。我一想,這不是錨點嗎,具體使用如下
<view class='parts'> <view class='item' @click="ScrollPosition('part1')">百日衝刺</view> <view class='item' @click="ScrollPosition('part2')">通關必備</view> <view class='item' @click="ScrollPosition('part3')">限時秒殺</view> <view class='item' @click="ScrollPosition('part4')">精品直播</view> </view>
ScrollPosition(part){ let that = this; uni.createSelectorQuery().select("."+part).boundingClientRect(function(res){//定位到你要的class的位置 console.log("標籤獲取====>",typeof(res.top)) uni.pageScrollTo({ scrollTop:res.top, duration: 300 }); }).exec() },
可以再加一個點選回到頂部
<image v-show="isShow" class="toTop" @click="topBack" src="/static/img/toTop.png" alt=""></image>
這個回到頂部的圖示需要固定定位
.toTop{ position: fixed; z-index: 2; left: 40rpx; bottom: 40vw; width: 100rpx; height:100rpx; }
具體方法
topBack(){ uni.pageScrollTo({ scrollTop:0, // 滾動到頁面的目標位置 這個是滾動到頂部, 0 duration:300 // 滾動動畫的時長 }) },