uniapp实现商品详情锚点定位效果

爱睡D小猪

已于 2022-03-04 16:10:25 修改

阅读量2k

点赞数 5

CC 4.0 BY-SA版权

分类专栏： uniapp 文章标签： javascript 前端开发语言

于 2022-03-04 16:00:57 首次发布

本文链接：https://blog.csdn.net/ZhouLoverBrother/article/details/123278937

1、直接复制粘贴引入uniapp页面

如果缺少什么css 自己补充就好了，做个笔记，内容过少的情况，tab选项不是百分百的切换到最后一个，没想好怎么优化
在这里插入图片描述

<template>
	<view class="page">
		<!-- 顶部选卡  -->
		<view class="scroll-row d-flex justify-between border-top position-fixed top-0" style="height: 80rpx;background-color: #FFFFFF;z-index: 1000;">
			<view 
				@tap="changeTab(index)"
				:class="tabIndex === index ? 'main-text-color ' : ''"
				class="scroll-row-item px-3 flex-1"
				style="height: 80rpx; line-height: 80rpx;"
				v-for="(i, index) in tabbars"
				:key="index"
			>
				<text class="font-md pb-1" :style="tabIndex === index ? 'border-bottom: 5rpx solid #3088ff; ' : ''">{
   {
    i.name }}</text>
			</view>
		</view>
		<!-- 填充 -->
		<view style="height: 80rpx;" class="w-100"></view>
		<!-- 列表 -->
		<scroll-view scroll-y="true"  @scroll="tabScoll" :scroll-top="scrollInto" scroll-with-animation  :scroll-into-view="scrollinto" :style="'height:' + scrollH + 'px;'" @scrolltolower="loadmore(index)">
			 <view class="scroll-box">
				 <view class="box1" :id="'tab'+index" v-for="(item,index) in conentist" :key="index">
				 	 <view>我是第{
   {
   index}}个6666</view>
				     <view>我是第{
   {
   index}}个6666</view>
					 <view>我是第{
   {
   index}}个6666</view>
					 <view>我是第{
   {
   index}}个6666</view>
					 <view>我是第{
   {
   index}