uni-app⼩程序如何使⽤锚点定位scroll-into-view
点击切换实现锚点定位
在⼩程序中是没有办法使⽤a标签来实现锚点跳转这个功能的。但是呢也有很多办法可以解决。
按钮的代码就是⼀个点击然后传参，参数就是需要跳转的id属性，特别注意的是SkipSite 最好动态传参，可以参考我下⾯的代码
<scroll-view scroll-y='true' :scroll-top="scrollTop" :scroll-into-view="SkipSite" class="groupPurchase_main" ></scroll-view> export default {
data() {
return {
SkipSite：‘ ’ // 需要定位过去的id
}
}，
methods（）{
goskip( event ) {
console.log( '进⼊跳锚点' )
console.log( event.detail.name )
this.SkipSite = event.detail.name
},
}
}
html部分
<scroll-view scroll-y='true' :scroll-top="scrollTop" :scroll-into-view="SkipSite" class="groupPurchase_main" >
<view class="groupPurchase_banner">
<image :src="ver" ></image>
</view>
<view class="groupPurchase_title">
<view class="groupPurchase_title_left">
<view class="groupPurchase_title_leftTop">
{{ goods.title }}
</view>
<view class="groupPurchase_title_leftBottom">
<text >￥</text>
<text >{{ goods.price }}</text>
</view>
</view>
<view class="groupPurchase_title_right" @click="shareFriend">
<image src="/static/images/groupPurchase_share.png" ></image><text>分享</text>    </view>
</view>
<view class="groupPurchase_state">
<view class="groupPurchase_state_title">
{{ teambuy.length }}⼈在拼团，{{ teambuy.length ? '可直接参与' : '等你开团' }}
</view>
<view class="groupPurchase_state_main" v-for="(item,index) in teambuy" :key="index">
<view class="groupPurchase_state_mainLeft">
<image :src="item.icon" ></image>
<text>{{item.nickname}}</text>
</view>
<view class="groupPurchase_state_mainMid">
<view class="groupPurchase_state_mainMid_top">
还差 <text>1⼈</text> 拼成
</view>
<view class="groupPurchase_state_mainMid_bottom">
<text> {{ pire }} 结束</text>
</view>
</view>
<view class="groupPurchase_state_mainRight" @click="joinShow_true( item.tid , index )">
去拼团
</view>
</view>
</view>
<van-tabs color="#ec6b3d" @click="goskip">
<!-- @tap="go_skip(Skipgroup)" -->
<!-- <view > -->
<van-tab title="团购详情" name="Skipgroup"></van-tab>
<!-- </view> -->
<!-- <view > -->
<!-- @click="go_skip(Skippurchase)" -->
<van-tab title="购买须知" name="Skippurchase"></van-tab>
<!-- </view> -->
<!-- <view > -->
<!-- @click="go_skip(Skipremark)" -->
<van-tab title="⽹友点评" name="Skipremark"></van-tab>
<!-- </view> -->
</van-tabs>
<!-- <scroll-view scroll-y="false" :scroll-into-view="SkipSite" >
</scroll-view> -->
<view class="particulars" id="Skipgroup">
<view class="title">
<view class="left">
{{ goods.title }}
</view>
<!-- <view class="right">
1份 <text>⼁</text> 1998 元
<view v-for="(item,index) in goods.information" :key="index">
<view class="subjects">
<view class="title">
科⽬
</view>
<view class="content">
{{ item.name }}
</view>
</view>
<view class="period">
<view class="title">
课时
</view>
<view class="content">
{{ item.time }}
</view>
</view>
</view>
<view class="oldPrice">
<view class="title">
总价
</view>
<view class="content" >      {{ goods.price }}元
</view>
</view>
<view class="activePrice">
<view class="title">
团购价
</view>
<view class="content" >      {{ wPrice }}元
</view>
</view>
</view>
</view>
<view class="inform_top">
<view class="list">
<view class="title">
⽬标学历
</view>
<view class="content">
{{ goods.target }}
</view>
</view>
<view class="list">
<view class="title">
适合阶段
</view>
<view class="content">
{{ goods.basics }}
<view class="title">
班型
</view>
<view class="content">
{{goods.person}}
</view>
</view>
</view>
<view class="inform_title" id="Skippurchase">
<view class="content">
<text>购买须知</text>
<van-icon name="volume-o" />
</view>
</view>
<view :class="{ 'inform_bottom' : 'inform_bottom' , 'isLook' : isLook }">
<view class="list">
<view class="title">
适⽤⼈
</view>
<view class="content">
·{{ wd }}
</view>
</view>
<view class="list">
<view class="title">
上课⼈数
</view>
<view class="content">
·{{ goods.person }}
</view>
</view>
<view class="list">
<view class="title">
适⽤对象
</view>
<view class="content">
·{{ goods.apply }}
</view>
</view>
<view class="list">
<view class="title">
课程特⾊
</view>
<view class="content">
·{{ goods.characteristic }}
</view>
</view>
<view class="list">
<view class="title">
<view class="content">
·{{ }}
</view>
</view>
<view class="list">
<view class="title">
预约
</view>
<view class="content">
·{{ goods.subscribe }}
</view>
</view>
<view class="list">
<view class="title">
调课说明
</view>
<view class="content">
·{{ urse }}
</view>
</view>
<view class="list">
<view class="title">
其他说明团购小程序怎么做
</view>
<view class="content">
·{{ ark }}
</view>
</view>
</view>
<view class="lookMore">
<view class="content" @click="changeIsLook">
<text>{{ isOpen }}</text>
<van-icon name="arrow-down" v-show="isOpen == '展开'"></van-icon>
<van-icon name="arrow-up" v-show="isOpen != '展开'" ></van-icon>
</view>
</view>
<view class="shop">
<view class="title" id="mendian">
适⽤门店
</view>
<view class="main">
<view class="left">
{{ shops.name }}
</view>
<view class="right">
<image src="/static/images/message.png" @click="callPhone"></image>
<image src="/static/images/store_phone.png" @click="callPhone"></image>    </view>
</view>
<!-- <view class="rate">评分
<van-rate value="4.5" void-icon="star" color="#ff6634" void-color="#dddddd" readonly allow-half size
="26rpx" />

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。