1. 程式人生 > 其它 >uni-app中使用錨點定位

uni-app中使用錨點定位

.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  // 滾動動畫的時長
	})
   },