微信小程序scroll-view的scroll-into-view和vanUI的tabs标签结合使用

背景:当tabs下的tab切换时,scroll-view滑动到对应的位置

注意点:

van-tabs和scroll-view标签分开编写

van-tab的name属性代表标签名称,作为匹配的标识符

scroll-into-view的id值必须是动态值,即tab切换后的值

scroll-into-view的id不能时数字;

scroll-into-view的id值应为某子元素id。如以下的<view id="goods-rate">

wxml:

<van-tabs sticky active="{{ active }}" animated bind:click="clickTab"><van-tab wx:for="{{tabOptions}}" wx:key="index" name="{{item.viewId}}" title="{{item.title}}"  data-id="{{item.viewId}}"></van-tab>
</van-tabs>
<scroll-view scroll-y class="goods-detail-container" scroll-into-view="{{viewId}}" scroll-with-animation><!-- 简介 --><view id="goods-introduce"><swiper class="swiper-container" indicator-dots indicator-active-color="#fff" autoplay circular><swiper-item class="swiper-item" wx:for="{{goodsInfoList.pics}}" wx:key="id"><image class="goods-desc-image" src="{{item.pic}}" mode="aspectFill"></image></swiper-item></swiper><view class="goods-basic"><view class="price"><view class="min-price">{{basicInfo.minPrice}}</view><view class="original-price">{{basicInfo.originalPrice}}</view></view><view class="title">{{basicInfo.name}}</view><view class="characteristic">{{basicInfo.characteristic}}</view><view class="share-desc">分享有赏,好友下单后可得5源现金奖励</view><view class="skulist"></view></view></view><!-- 详情 --><view id="goods-detail"><view class="label-title">商品详情</view><mp-html class="goods-detail-box" content="{{goodsInfoList.content || ''}}" /></view><!-- 评价 --><view id="goods-rate">宝贝评价</view>
</scroll-view>

js:clickTab点击切换后更改动态的viewId才能正常切换

data: {// 标签切换索引active: 1,tabOptions:[// viewId用户滚动到指定位置{title:"商品简介",viewId:"goods-introduce"},{title:"商品详情",viewId:"goods-detail"},{title:"商品评价",viewId:"goods-rate"},],// 标签切换idviewId: '',},
// 切换标签
clickTab(e){console.log(e,"onChange");this.setData({viewId: e.detail.name});
},

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/222264.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Python 自动化之处理图片(一)

图片美化与大小调整 文章目录 图片美化与大小调整前言一、基本结构二、引入库三、用户输入模块四、图片美化模块五、大小调整模块总结 前言 本文主要分为两部分。一是图片的美化吧算是&#xff0c;主要从亮度、对比、色彩饱和度、锐度四个方面进行美化&#xff1b;二是图片的像…

自动化测试Selenium node 配置

查看自己chrome浏览器的版本 下载chromedriver对应版本&#xff0c;下载当前版本中最大版本。 https://npm.taobao.org/mirrors/chromedriver 安装java jdk &#xff0c;版本至少1.7, 并配置jdk环境变量 以下2个文件放在同一个目录下 Cmd地址切换到第四点目录下&#xff0c;然…

【基础知识】Hadoop生态系统

Hadoop是一个开源的分布式计算框架,主要用于大数据的存储和处理&#xff0c;即一个包含多种组件的综合分布式系统,组件相互协作完成从数据存储到计算分析的完整功能。 关键词——容灾 主从结构、多副本 主要特点 分布式存储 - Hadoop采用HDFS文件系统,可以将大数据分布式存…

Android开发的技术与开发流程

目录 引言 1. Android开发环境搭建 1. 安装Java Development Kit&#xff08;JDK&#xff09; 2. 安装Android Studio 3. 配置虚拟设备&#xff08;可选&#xff09; 4. 创建你的第一个Android项目 5. 连接实体设备&#xff08;可选&#xff09; 2. Android基础知识 1…

影响云渲染质量的几大要素是什么?影响云渲染质量的主要原因有?

对于3D渲染从业者而言&#xff0c;实现高效和高质量的渲染是一个常见的挑战。由于三维场景的复杂性&#xff0c;相关计算和处理通常需要大量的计算能力和存储&#xff0c;尤其是当面对着高分辨率图像、详细的动画或全局光照效果等要求时&#xff0c;渲染时间往往会大幅增加。针…

了解构造函数原型对象的语法特征,掌握 JavaScript 中面向对象编程的实现方式,基于面向对象编程思想实现 DOM 操作的封装。(第三天)

有什么不懂可以去看我前两天的笔记 https://blog.csdn.net/weixin_70007095/article/details/134905674 目录 有什么不懂可以去看我前两天的笔记 JavaScript 进阶 - 第3天笔记 编程思想 面向过程 面向对象 构造函数 原型对象 constructor 属性 对象原型 原型继承 原型链 JavaSc…

HarmonyOS学习 第2节 DevEco Studio工程介绍

工程配置页 界面布局介绍 代码编辑区、通知栏、工程目录区、预览区 工程目录区 便于理解&#xff0c;可以切换为 Ohos AppScope主要用于存放整个应用公共的信息与资源 entry默认的初始模块ets文件用于存放编写的代码文件configuration存放相应模块的配置文件resources对应模块…

IIS配置多域名跨域

搜索了一轮&#xff0c;自己实践发现iis中填多条Access-Control-Allow-Origin记录、逗号分隔、正则表达式这些是不行的。另外好像无论Ngxin还是Tomcat等都要rewrite之类的方法。由于仅仅是测试&#xff0c;所以暂时用*通配符算了。记录一下参考&#xff0c;要的时候再研究 CORS…

java编程者快速掌握ts变量类型

JAVA编程者快速掌握typeScript TypeScript是JavaScript的超集。 它对JS进行了扩展&#xff0c;向JS中引入了类型的概念&#xff0c;并添加了许多新的特性。 TS代码需要通过编译器编译为JS&#xff0c;然后再交由JS解析器执行。 TS完全兼容JS&#xff0c;换言之&#xff0c;任…

python通过slots指定实例属性列表

1 python通过slots指定实例属性列表 python类通过__slots__属性列表&#xff0c;指定类实例可以创建的属性。 1.1 slots基础 用法 >>> class SlotsC:__slots__[attr1,...,attrn]描述 &#xff08;1&#xff09; 实例只能创建__slots__列表内声明的属性&#xff1…

leetcode 1466

leetcode 1466 使用dfs 遍历图结构 如图 node 4 -> node 0 -> node 1 因为节点数是n, 边长数量是n-1。所以如果是从0出发的路线&#xff0c;都需要修改&#xff0c;反之&#xff0c;如果是通向0的节点&#xff0c;例如节点4&#xff0c;则把节点4当作父节点的节点&…

保障网络安全:了解威胁检测和风险评分的重要性

在当今数字时代&#xff0c;网络安全问题变得愈发突出&#xff0c;而及时发现和迅速应对潜在威胁成为保障组织信息安全的首要任务。令人震惊的是&#xff0c;根据2023年的数据&#xff0c;平均而言&#xff0c;检测到一次网络入侵的时间竟然长达207天。这引起了对安全策略和技术…

威睿三合一电驱动系统斩获“2023汽车新供应链百强-金辑奖”

10月19日&#xff0c;2023第五届“金辑奖”颁奖盛典在上海圆满落幕。威睿公司“高效低噪碳化硅电驱动系统”在动力总成电气化领域脱颖而出&#xff0c;荣获“2023中国汽车新供应链百强”荣誉称号。 “金辑奖”由盖世发起&#xff0c;旨在“发现好公司推广好技术成就汽车人”&a…

12月14日,每日信息差

以下是2023年12月14日的10条信息差 第一、极氪发布首款自研电池&#xff0c;将在极氪007上首发搭载。该电池为量产快充磷酸铁锂电池&#xff0c;将在极氪007上首发搭载&#xff0c;充电15分钟续航增加超过500公里&#xff0c;-10C低温环境快充速度提升25% 第二、芒果TV与抖音…

利用机器学习实现客户细分:提升市场营销效果的技术策略

客户细分是一项关键的市场营销策略&#xff0c;可以帮助企业更好地了解其目标受众&#xff0c;个性化定制产品和服务&#xff0c;提高市场营销效果。本文将介绍如何利用机器学习算法实现客户细分&#xff0c;包括数据准备、特征工程、算法选择、模型训练和评估等关键步骤。通过…

一文5000字从0到1构建高效的接口自动化测试框架思路

在选择接口测试自动化框架时&#xff0c;需要根据团队的技术栈和项目需求来综合考虑。对于测试团队来说&#xff0c;使用Python相关的测试框架更为便捷。无论选择哪种框架&#xff0c;重要的是确保 框架功能完备&#xff0c;易于维护和扩展&#xff0c;提高测试效率和准确性。…

雪花算法详细讲解

学习的最大理由是想摆脱平庸&#xff0c;早一天就多一份人生的精彩&#xff1b;迟一天就多一天平庸的困扰。各位小伙伴&#xff0c;如果您&#xff1a; 想系统/深入学习某技术知识点… 一个人摸索学习很难坚持&#xff0c;想组团高效学习… 想写博客但无从下手&#xff0c;急需…

36、什么是池化算法

池化算法也是 CNN 网络中非常常见的算法。 池化这一算法理解起来比较简单,从名字中或许可以看到一些东西:从一个像素池子中选取一些有代表性的像素出来。 常见的池化有最大池化和平均池化。最大池化就是从像素池子中选取最大值出来,而平均池化就是从像素池子中选取平均值出…

MySQL8.0默认配置详解--持续更新中

binlog日志的默认保留数量和大小 在MySQL 8.0中&#xff0c;您可以使用以下SQL命令来查询binlog日志的默认保留数量和大小&#xff1a; SHOW VARIABLES LIKE binlog_expire_logs_seconds; SHOW VARIABLES LIKE max_binlog_size;binlog_expire_logs_seconds 变量表示binlog日志…

Linux---mkdir和rm命令选项

1. mkdir命令选项 命令选项说明-p创建所依赖的文件夹 mkdir命令选项效果图: 2. rm命令选项 命令选项说明-i交互式提示-r递归删除目录及其内容-f强制删除&#xff0c;忽略不存在的文件&#xff0c;无需提示-d删除空目录 rm -i命令选项效果图: rm -r命令选项效果图: rm -f命…