点击切换实现锚点定位
在微信小程序中是没有办法使用a标签来实现锚点跳转这个功能的。但是呢也有很多办法可以解决。
按钮的代码就是一个点击然后传参，参数就是需要跳转的id属性，特别注意的是SkipSite 最好动态传参，可以参考我下面的代码
<scroll-view scroll-y='true' :scroll-top="scrollTop" :scroll-into-view="SkipSite" class="groupPurchase_main" style="flex: 1;overflow-y: scroll;"></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" style="flex: 1;overflow-y: scroll;">
<view class="groupPurchase_banner">
<image :src="goods.cover" style="width: 700rpx;height: 400rpx;border-radius: 20rpx;margin-left: 25rpx;"></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 style="color: #EC7044;font-size: 20rpx;">￥</text>
<text style="color: #EC7044;font-size: 30rpx;margin-right: 20rpx;">{{ goods.newPrice }}</text>
<text style="font-size: 18rpx;color:#969696;">￥</text>
<text style="font-size: 18rpx;color:#969696;text-decoration: line-through;">{{ goods.price }}</text>
</view>
</view>
<view class="groupPurchase_title_right" @click="shareFriend">
<image src="/static/images/groupPurchase_share.png" style="width: 31rpx;height: 34rpx;margin-bottom: 10rpx;"></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" style="width: 60rpx;height: 60rpx;border-radius: 50%;margin-right: 10rpx;"></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> {{ item.expire }} 结束</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" style="height: 100%;" >
</scroll-view> -->
<view class="particulars" id="Skipgroup">
<view class="title">
<view class="left">
{{ goods.title }}
</view>
<!-- <view class="right">
1份 <text>丨</text> 1998 元
</view> -->
</view>
<view class="main">
<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" style="color: #595959;font-size: 26rpx;">
{{ goods.price }}元
</view>
</view>
<view class="activePrice">
<view class="title">
团购价
</view>
<view class="content" style="color: #ec6b3d;font-size: 34rpx;">
{{ goods.newPrice }}元
</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>
</view>
<view class="list">
<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">
·{{ goods.crowd }}
</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>
<view class="content">
·{{ goods.term }}
</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">
·{{ goods.course }}
</view>
</view>
<view class="list">
<view class="title">
其他说明
</view>
<view class="content">
·{{ goods.remark }}
</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" style="width: 35rpx;height: 30rpx;margin-right: 45rpx;" @click="callPhone"></image>
<image src="/static/images/store_phone.png" style="width: 27rpx;height: 33rpx;margin-right: 17rpx;" @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" />
</view> -->
<view class="site" @click="siteShowTrue">
<van-icon name="location-o" />
<text>{{ shops.addr }}</text>
</view>
</view>
<view class="store_evaluate" v-if="GoodsComment.length" id="Skipremark">
<view class="title" >
<view class="left">
精选点评 <text>({{GoodsComment.length}})</text>
</view>
<view class="right">
<van-icon name="arrow" />
</view>
</view>
<view class="typeBox">
<view class="type" v-for="(item,index) in evaluateList" :key="index">
{{item.content}}
</view>
</view>
<view class="listBox" v-for="(item,index) in GoodsComment" :key="index">
<view class="head">
<image :src="item.icon" style="width: 74rpx;height: 74rpx;border-radius: 50%;"></image>
<!-- <image src="/static/images/vip_logo.png" class="vip_logo"></image> -->
</view>
<view class="content">
<view class="title">
<text>{{ item.name }}</text>
<!-- <text>Lv4</text> -->
</view>
<view class="time">
{{ item.create }}
</view>
<!-- <view class="remarkBox">
<view class="remark">
消费后评分
</view>
</view>
<view class="grade">
<text>打分</text>
<van-rate
void-icon="smile"
value="4.5"
size="12"
allow-half="true"
color="#D81E06"
void-color="#eee"
/>
</view> -->
<view class="describe">
{{item.content}}
</view>
<view class="imgListBox">
<view class="imgList" v-for="(items,indexs) in item.img" :key="indexs">
<image :src="items" style="width: 200rpx;height: 200rpx;border-radius: 4rpx;"></image>
</view>
<view class="imgNumberBox">
<image src="../../static/images/imglogo_fff.png" style="width: 21rpx;height: 17rpx;"></image>
<text>{{ item.img.length }}</text>
</view>
</view>
</view>
</view>
<view class="lookMore">
<text>查看全部精选点评</text>
<van-icon name="arrow" />
</view>
</view>
<!-- 拼团弹框 -->
<van-popup :show="joinShow" @close="joinShow_flase">
<view class="groupPurchase_joinBox">
<view class="join_cross">
<van-icon name="cross" @click="joinShow_flase" />
</view>
<view class="join_title">
参与{{ nowteambuy.nickname }}的拼团
</view>
<view class="join_hint">
仅剩1个名额，{{ nowteambuy.expire }}结束
</view>
<view class="join_listBox">
<view class="join_list" v-for="(item,index) in TeamBuyView.list" :key="index">
<image :src="item.icon" style="width: 80rpx;height: 80rpx;border-radius: 50%;" :class="{ 'join_listLeader' : item.id == 1 }"></image>
</view>
</view>
<view class="join_btn" @click="go_groupSuccess">
参与拼团
</view>
</view>
</van-popup>
<!-- 下单弹框 -->
<van-popup :show="orderShow" position="bottom" custom-style="height: 765rpx;" @close="orderShow_false">
<view class="order_box">
<view class="order_head">
<view class="head_left">
<image src="/static/images/order_head.png" style="width: 200rpx;height: 200rpx;border-radius: 5rpx;"></image>
</view>
<view class="head_right">
<view class="top">
<text>￥</text> {{ (checkPrice * checkNum) ? (checkPrice * checkNum) : '请选择商品' }}
</view>
<view class="bottom">
请选择：组合
</view>
</view>
</view>
<view class="order_type">
<view class="order_type_title">
组合
</view>
<view class="order_type_listBox" >
<text :class="{'order_type_list' : 'order_type_list' , 'colorFF6634' : index == activeCheck}" @click="checkPri(index)" v-for="(item,index) in goods.information" :key="index">
{{ item.name }}
</text>
</view>
</view>
<view class="order_number">
<view class="number_left">
节数
</view>
<view class="number_right">
<van-stepper :value="checkNum" @plus="checkNumFun(1)" @minus="checkNumFun(-1)" integer button-size="50rpx" input-width="75rpx" />
</view>
</view>
<view class="order_btn" @click="alonePay">
确定
</view>
</view>
</van-popup>
<!-- 地图弹框 -->
<van-popup :show="siteShow" @close="siteShowFalse" round closeable close-icon="close">
<view class="mapBox" style="padding: 50rpx;">
<map style="width: 500rpx; height: 500rpx;" :latitude="latitude" :longitude="longitude" :markers="markers"></map>
</view>
</van-popup>
</scroll-view>
js部分 因为我使用的按钮用的是van
goskip( event ) {
console.log( '进入跳锚点' )
console.log( event.detail.name )
this.SkipSite = event.detail.name
},
写的不好希望理解，又不懂的也可以私聊我，觉得还行的就点个赞，谢谢
477
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
