【首页】改变内容块高度

一、【首页】改变内容块高度

1.1 获取可视区域高度可以使用uni.getSystemInfo(),但是在ios中是有bug的,所以的高度值不对。

1.2 我们修正bug思想是:获取组件元素的高度值的合,然后赋值到内容块中(style=’height’)。

1.3 具体代码如下:特别注意需要在onReady中写入

1.4swiper中做出的改变如下:

1.5在index.vue中的代码如下:

<template>
	<view class="index">
		<scroll-view scroll-x="true" class="scroll-content" :scroll-into-view="scrollintoindex">
			<view
			  :id="'top'+index"
			  class="scroll-item"
			  v-for="(item,index) in topbar"
			  :key='index'
			  @tap='changetab(index)'
			>
				<text :class='topbarindex===index?"f-active-color":"f-color"'>{{item.name}}</text>
			</view>
		</scroll-view>
		
		<swiper @change="onchangetab" :current="topbarindex" :style="'height:'+clentheight+'px;'">
			<swiper-item 
			  v-for="(item,index) in topbar"
			  :key="index">
				<!--<view >{{item.name}}</view>-->
				<view class="home-data">
					<indexswiper></indexswiper>
					<recommend></recommend>
					<card cardtitle='猜你喜欢'></card>
					<commoditylist></commoditylist>
				</view>
			</swiper-item>
		</swiper>
		
		<!--推荐模板-->
		<!--<indexswiper></indexswiper>
		<recommend></recommend>
		<card cardtitle='猜你喜欢'></card>
		<commoditylist></commoditylist>-->
		
		<!--其他模板:运动户外、美妆....-->
		<!--<banner></banner>
		<icons></icons>
		<card cardtitle='热销爆品'></card>
		<hot></hot>
		<card cardtitle='推荐店铺'></card>
		<shop></shop>
		<card cardtitle='为您推荐'></card>
		<commoditylist></commoditylist>-->
	</view>
</template>

<script>
	import indexswiper from '@/components/index/indexswiper.vue'
	import recommend from '@/components/index/recommend.vue'
	import card from '@/components/common/card.vue'
	import commoditylist from '@/components/common/commoditylist.vue'
	import banner from '@/components/index/banner.vue'
	import icons from '@/components/index/icons.vue'
	import hot from '@/components/index/hot.vue'
	import shop from '@/components/index/shop.vue'
	export default {
		data() {
			return {
				//选中的索引
				topbarindex:0,
				//顶栏跟随的索引id值
				scrollintoindex:"top0",
				//内容块的高度值
				clentheight:0,
				//顶栏数据
				topbar:[
					{name:'推荐'},
					{name:'运动户外'},
					{name:'服饰内衣'},
					{name:'鞋靴箱包'},
					{name:'美妆个护'},
					{name:'家居数码'},
					{name:'食品母婴'}
				]
			}
    	},
		components:{
			indexswiper,
			recommend,
			card,
			commoditylist,
			banner,
			icons,
			hot,
			shop
		},
		onLoad() {

		},
		onready(){
			let view = uni.createSelectorQuery().select(".home-date");
			view.boundingClientRect(data =>{
				this.clentheight = data.height;
			}).exec();
		},
		methods: {
			changetab(index){
				if(this.topbarindex === index){
					return;
				}
				this.topbarindex = index;
				this.scrollintoindex = 'top'+index;
			},
			onchangetab(e){
				this.changetab(e.detail.current);
			}
		}
	}
</script>

<style scoped>
	.scroll-content{
		width: 100%;
		height: 80rpx;
		white-space: nowrap;
	}
	.scroll-item{
		display: inline-block;
		padding: 10rpx 30rpx;
		font-size: 32rpx;
	}
	.f-active-color{
		padding: 10rpx 0;
		border-bottom: 6rpx solid #cc0000;
	}
</style>

 

本文转载于网络 如有侵权请联系删除

相关文章

  • 分子对接教程 | (6) AutoDock对接操作与对接结果解读

    首先导入受体蛋白,这一步,ADT会问你是否想保留输入电荷,对于蛋白受体,无论什么情况下,我们是不需要手动计算Gasteiger电荷的,下面操作后会自己更正。接下来导入小分子接下来你可以按照下图设置显示形式,颜色按照前面的倒三角形里面选择显示二级结构,通过链显示颜色。选择Grid>GridBox...设置对接的盒子大小、坐标、格点数、格点距离,这一步需要自己根据不同的结构来进行具体确认。一般来说最简单的方法是:查阅文献、晶体结构数据库,寻找配体可能的结合位点附近的重要氨基酸残基。对接的中心坐标并不一定非常准确,只要对接的盒子包含了配体可能结合的最大区域即可。我这里没有详细去查,所以选择全部包裹。通过调整后,蛋白已被全部包裹。这里看不见蛋白了。可以在View中勾选Showboxaslines,让盒子只显示外框。然后把我们的小分子取出来,弹出窗口,选择小分子,把图中的√去掉。右键选择小分子,拖动出来。然后再把上面的√勾选回去,关掉弹出窗口,接下来保存盒子。然后导出GPF文件。我这里保存的名称为:1e8y.gpf接下来运行Grid,按下图操作,弹出窗中ParameterFilename栏

  • Angular Table test

    CreatedbyWang,Jerry,lastmodifiedonJun08,2016

  • centos6.5 安装hadoop1.2.1的教程详解【亲测版】

    本篇只简单介绍安装步骤1.角色分配10.11.84.4web-crawler--1.novalocalmaster/slave 10.11.84.5web-crawler--2.novalocalslave 10.11.84.6web-crawler--3.novalocalslave复制2.安装目录/usr/local/hadoop(HADOOP_HOME)3,创建grouphadoopgroupaddhadoop4.创建用户hadoopuseradd-d/home/hadoop-ghadoophadoop chown-Rhadoop:hadoop/usr/local/hadoop复制5.每台机器安装jdk(安装在相同的目录)1)查看java版本,可以看到jdk为openjdk,最好更换为sunjdk[hadoop@hadoop2~]$java-version openjdkversion"1.8.0_131" OpenJDKRuntimeEnvironment(build1.8.0_131-b12) OpenJDK64-BitServerVM(build25.1

  • PHP 正则表达式 获取富文本中的 img标签的src属性

    前言 鄙人发现对于微信看看中的文章,一般都会有三张摘要图片; 所以想着可以直接提取富文本中的<img>标签的src属性信息; 这样就可以在前台的文章列表中展示三张图片(建议不要多了),吸引阅读,美化布局…环境-首先要知道,虽然正则表达式学习起来比较通用,但是不同的语言还是会有所差异; -我选用的是PHP语言,所以需要提醒下参考环境,虽然问题也不大复制场景分析起先我测试使用的正则表达式如下:'/<img\b.+\bsrc\b\s*=\s*[\'\"]([^\'\"]*)[\'\"]/iU'; 想着可以一次性匹配出需要的信息; 但是发现遇到很多阻碍(主要还是不够扎实) 后面发现可以先匹配出<img>标签:'/<img\b.*?(?:\>|\/>)/i' 然后再循环匹配出src属性信息:'/\bsrc\b\s*=\s*['\"]?([^'\"]*)['\"]?/i'

  • 007.ELK收集Java日志

    1.Java日志的特点服务器访问日志都是一行一行的:{"time_local":"16/Apr/2020:17:17:09+0800","remote_addr":"10.0.0.101","referer":"-","request":"GET/HTTP/1.0","status":200,"bytes":612,"agent":"ApacheBench/2.3","x_forwarded":"-","up_addr":"-","up_host":"-","upstream_time":"-","request_time":"0.000"} {&quo

  • MySQL方向工作的三股清流

    这段时间虽然因为疫情导致原本的一些工作有了延后,但是整体来说,大方向的事情还是基本成为定数。如果让我来选择今年要做的几件事情,我觉得有三股清流是需要关注的,也就是说不单单从技术层面来考虑,而是综合业务使用场景和整体的演进过程。第一股清流就是备份恢复,似乎在这些年被淡忘了,淡忘了还好,一旦要记起来的时候基本就来不及了,你会发现所有你能想到的优化的地方都是一篇荒漠,基于云环境确实提供了一些便利和稳定性,但是不代表你不需要做投入去完善和补充。如何能够更高效的完成备份,使用性价比最好的存储模式,稳定可控的恢复效率,应该是我们需要持续不断迭代改进备份恢复方向工作的大目标。在任何优先级面前,备份恢复可能在业务层代表的含义是很单薄的,但是这是数据生死攸关的大事,请先把它放在最基础紧要的工作里面。第二股清流就是高可用,我们有传统概念中理解的高可用,也有基于分布式环境的高可用方案,高可用代表着我们的后端服务不是死板的,动不得的,而是在保证业务可用的前提下,实现业务和系统的可用性。高可用可做的事情非常多,不同阶段对标的目标也大不相同,如何换句话说,我们可以不用苛求数据库层100%的可用,而结合业务层,基于

  • Intellij IDEA WebStorm/PhpStorm中文输入框无法跟随怎么办?

    之前被这个问题折腾了好一阵子,最后终于在知乎上找到了解决方法,可以通过更新jdk解决,如果嫌麻烦可以更换输入法。环境为:jdkjre1.8.0_131,idea2017.1.4,搜狗输入法8.5正式版。方法一:1.首先需要安装Java环境(如果你没装过的话)下载地址:https://www.java.com/zh_CN/,升级jdk至最新版本(以1.8.0_131为例),安装的过程中同时安装jre;2.关掉idea,然后去idea安装路径下把jre64文件夹重命名掉,或删掉,最好是重命名掉,出问题后还能恢复过来,下面的图片中是重命名成jre642了;3.把Java安装路径下的jre1.8.0_131拷贝过来,然后把文件夹重命名为jre64;4.把对应版本的jdk/lib的tools.jar拷贝到jre64/lib下;然后再次启动idea,输入法候选框应该可以跟随光标了。方法二:出现输入框不能跟随的问题,多是输入法和软件不兼容导致的。百度输入法回应:经后台定位是该程序本身没有去设置输入法的位置信息导致的。经过测试,必应输入法是可以解决这个问题的,Win8/10的用户直接用自带的输入人就可

  • NLP+词法系列(一)︱中文分词技术小结、几大分词引擎的介绍与比较

    版权声明:博主原创文章,微信公众号:素质云笔记,转载请注明来源“素质云博客”,谢谢合作!!https://blog.csdn.net/sinat_26917383/article/details/52275328笔者想说:觉得英文与中文分词有很大的区别,毕竟中文的表达方式跟英语有很大区别,而且语言组合形式丰富,如果把国外的内容强行搬过来用,不一样是最好的。所以这边看到有几家大牛都在中文分词以及NLP上越走越远。哈工大以及北大的张华平教授(NLPIR)的研究成果非常棒!但是商业应用的过程中存在的以下的问题:1、是否先利用开源的分词平台进行分词后,再自己写一些算法进行未登录词、歧义词的识别?2、或者直接调用下文介绍的分词引擎来进行分词呢?缴费使用固然很棒,但是是否值得?——————————————————————————————————————————来看一下这篇论文一些中文分词工具的性能比较《开源中文分词器的比较研究_黄翼彪,2013》8款中文分词器的综合性能排名: Paoding(准确率、分词速度、新词识别等,最棒) mmseg4j(切分速度、准确率较高) IKAnalyzer Imd

  • [疯狂Java]JDBC:PreparedStatement预编译执行SQL语句

    1.SQL语句的执行过程——Statement直接执行的弊病:  1)SQL语句和编程语言一样,仅仅就会普通的文本字符串,首先数据库引擎无法识别这种文本字符串,而底层的CPU更不理解这些文本字符串(只懂二进制机器指令),因此SQL语句在执行之前肯定需要编译的;  2)SQL语句的执行过程:提交SQL语句->数据库引擎对SQL语句进行编译得到数据库可执行的代码->执行SQL代码;  3)现在再来看Statement的执行机制:     i.Statement的execute系列方法直接将SQL语句作为参数传入并提交给数据库执行;     ii.也就是说每提交一次都需要先经过编译然后再执行;     iii.那么有一个最大的问题就是如果一条SQL语句需要再短时间内被反复执行,那么每次都需要经过编译这样不是效率非常非常低吗??!!可能你会问哪有需要反复大量执行的相同语句呢?仔细一想可能是的,因此上面说的并不完全精确,精确地讲应该是反复执行一系列模型相似的语句,比如:[sql]viewplaincopyinsertinto table1 values(1, "Peter&

  • Python第一天:Python擅长领域以及各种重点学习框架(包含Python在世界上的应用)

    toc 今天开始将会发布系列型的Python学习,今天讲述的框架相对来说比较多,只能一一例举出来,无法进行准确的 Python5大擅长领域 很多学Python的小伙伴,转行,或者兴趣还有就是单纯想了解的小伙伴,学Python的时候都只盲目的学习,但是却不知道Python未来可以干啥?很多人就知道WEB开发、爬虫、AI,这三个。没错,这三个确实是Python的方向中的几个,但是除了这几个,你又了解哪些?又该学什么? WEB开发 学习重点: DjangoTornadoFlaskWebPyBottle网络编程 学习重点: TwistedRequestsScrapyPrarmiko科学运算 学习重点: SciPyPandasIpythonGUI图形开发 学习重点: wxPythonPyQTKivy运维自动化 学习重点: openStackSaltStackAnsible腾讯蓝鲸在此对各大框架不进行介绍,需要的可以在百度上面寻找,或者到python.org官网找, Python在世界上的知名应用 国外 谷歌 GoogleAppEngine、code.google.com、Googleearty、

  • BZOJ3732: Network(Kruskal重构树)

    题意Link给出一张$n$个点的无向图,每次询问两点之间边权最大值最小的路径$n\leqslant15000,m\leqslant30000,k\leqslant20000$Sol很显然答案一定在最小生成树上,但是此题还有一个更为玄学的做法—Kruskal重构树它是在Kruskal算法上改进而来的。算法流程:对于此题来说,将边权从小到大排序用并查集维护两点的联通性,若祖先不相同,那么新建一个节点,权值为边权。左右儿子分别为两个点这样建出来的树,我们称之为Kruskal重构树它有许多美妙的性质是一颗二叉树两点的LCA的点权为原图中最大值最小的路径上的最大值任意点的权值大于左右儿子的权值,是一个大根堆对于此题的样例来说,建出来的图大概长这样#include<cstdio> #include<algorithm> usingnamespacestd; constintMAXN=1e5+10,INF=1e9,B=19; inlineintread(){ charc=getchar();intx=0,f=1; while(c<'0'||c>

  • 如何写好一份优秀的竞品运营分析报告?

    网络上关于写产品竞品分析的文章很多,做运营类竞品分析的文章比较少,所以今天抛砖引玉和大家分享一下,我在分析竞品运营中的思考和心得。 每天发生在我们APP里各种变化都是值得运营学习的最好材料,尤其是竞品的变化,更是有许多与自己直接相关的经验可以学习。 通过观察和分析竞品,能够帮助我们了解动态变化,市场格局,找到细分机会;获取灵感,吸收经验,策划优质活动。当竞品出现杀手级功能或病毒型活动的时候,也能够迅速跟进,被对手验证不成功的活动,我们也可以少走弯路。 要想写好一份竞品运营分析报告,就需要先知道好的标准是什么。 在我看来,好的标准主要是和写报告的具体目的有关,能不能实现写报告的目的才是衡量是不是好报告的唯一标准。 比如领导让你去研究一下竞品的用户运营情况写份报告: ●有可能是为了寻找可借鉴学习之处; ●有可能是为了摸查竞争对手情况做好应对策略; ●也有可能是作为融资计划的参考数据; ●还有可能是看你最近工作量不饱和给你找点事做(囧)。 ...... 以上几种不同的目的,需要的分析报告非常不同,有可能满足其中一种目的的优秀报告,换到另外一种目的下,就会变得参考价值很低。

  • 大数据测试学习笔记之测试工具集

    这是2018年度业余主要学习和研究的方向的笔记:大数据测试 整个学习笔记以短文为主,记录一些关键信息和思考 预计每周一篇短文进行记录,可能是理论、概念、技术、工具等等 学习资料以IBM开发者社区、华为开发者社区以及搜索到的相关资料为主 我的公众号:开源优测大数据测试学习笔记之测试工具集本文主要记录大数据测试的一些基本工具,以便后续用的时候能深入的去学习。Bigbench 由Teradata、多伦多大学、InfoSizing、Oracle开发,其设计思想和利用扩展具有研究价值,可以参阅论文Bigbench:Towardsanindustrystandardbenchmarkforbigdataanalytics。 论文pdf:http://barbie.uta.edu/~hdfeng/bigdata/Papers/BigBench-towardsanindustrystandardbenchmarkforbigdataanalytics.pdfBerkeleyBigDataBench 随着Spark的推出,由AMPLab开发的一套大数据基准测试工具,官网介绍:https://ampl

  • 谷歌新玩具Vision Kit,带你DIY一个能识别千种物体的AI摄像头

    原作BillyRutledg Root编译自blog.google 量子位出品|公众号QbitAI今天,谷歌AIY项目新推出视觉感知套件VisionKit。AIY系列项目(全称是ArtificialIntelligenceYourself),鼓励开发者们和爱动手的技术发烧友自己在家搭建AI小硬件。借助VisionKit,用户可以将图像识别和计算机视觉功能添加到基于树莓派ZeroW的项目中,可支持无网条件下识别上千种常见对象和面部表情。VisionKit套件配有硬纸板外壳、支持神经网络加速的VisionBonnet电路板、带灯的拱形按钮、微型扬声器、具有微距和广角设置的镜头套件以及包括三脚架安装螺母在内的各种连接组件。不过要用户自己去买树莓派ZeroW,树莓派相机SD卡和电源。这个电路板,是VisionBonnet家的,具有英特尔MovidiusMA2450低功耗视觉处理单元,可以在设备上运行神经网络模型。用户拿到的软件,有PythonAPI,用来调整带灯按钮的颜色和扬声器的声音,还有三个基于TensorFlow的神经网络模型:一个经过MobileNet训练的能识别一千个普通物体,另一个

  • IBM谢国彤:认知医疗四大焦点,医药信息学顶会MedInfo2017最佳论文解读

    【新智元导读】在刚刚结束的MedInfo2017上,IBM中国研究院共发表了8篇论文。IBM中国研究院认知医疗研究总监谢国彤向新智元介绍了研究院认知医疗的研究焦点。8篇论文中,《针对房颤患者长期华法林用药的基于群的轨迹分析》获得了最佳论文第二名。我们请到了论文的第一作者郭世婧为大家做论文解读。MedInfo2017(第十六届世界医药健康信息学大会)刚刚在杭州闭幕,今年大会的主题是“基于医药信息学的精准医疗”。作为国际著名的健康和生物医学信息领域的盛会,MedInfo在某种意义上也成为了新信息技术变革医疗健康产业的风向标。本届大会上,我们看到IBM中国研究院在MedInfo2017上共发表了8篇论文,涵盖了一系列技术进步,旨在从预防、诊断、治疗和患者参与(patientengagement)四方面帮助临床医生完成慢性疾病的日常管理。实际上,使用认知计算来改善中国医疗已成为IBM中国研究院的主要关注领域之一。IBM中国研究院认知医疗研究总监谢国彤IBM中国研究院认知医疗研究总监谢国彤对新智元表示,研究院的认知医疗聚焦解决一个问题:利用认知计算,重塑疾病管理。具体体现为:1)疾病预防:基于精

  • 36.序列化器通用字段参数和字段类型

    drf在Django字段类型的基础上派生了自己的字段类型以及字段参数 序列化器的字段类型用于处理原始值和内部数据类型直接的转换 还可以用于验证输入、以及父对象检索和设置值     通用字段参数 read_only 该参数默认为false,设置为True的话则将字段变为只读 被设置成只读的字段可以包含在api输出中,但是创建或者更新期间不应该包含在输入中 即使你再序列化的时候为一个read_only字段提供值,也会被忽略 也就是说validated_data中不会包含发送过来的设置为只读字段的数据 write_only 默认为False 设置为True则表示只写不读 required 默认为True,表示该字段必填 设置为False表示该字段的内容可以空缺 default 为字段设置默认值 在字段中同时设置default和required关键字参数是无效的,并且会引发错误 allow_null 该参数的默认值为False,表示该字段不允许为空 如果设置为True,表示字段的值可以为空,或者是none 类型Django原生自动参数中的blank和null s

  • 如何用Github版本控制非Github库

    Git的图形化客户端有很多,不同的人可能习惯用不同的客户端。本人更习惯于Github的客户端,因为上Github比较多,同步代码到Github用官方的客户端是最方便的,所以也就更习惯于使用Github的客户端。最近,工作中要用Git进行项目的版本控制,为了迎合团队中喜欢使用图形界面的同事,我研究发现居然可以使用Github客户端同步代码到非Github代码库。 一、Github安装 去Github官网下载GitHub的客户端安装程序,安装的过程没啥好说的。 二、同步远程仓库 客户端安装完后,Win7桌面会产生GitHub和GitShell两个图标。先打开GitShell,然后在命令行使用gitclone或者gitremoteaddorigin命令同步远程仓库。对Git命令不太熟悉的朋友可以参考我的另一篇文章Git快速入门. 三、在Github客户端添加本地仓库 打开桌面的GitHub后,点击左上角的加号,选择Add选项,然后点Browse按钮找到本地仓库,最后Addrepository。这样就把本地仓库添加到了Github客户端,就可以使用在客户端里进行Git的各种操作了。如果

  • C#基础、Config资料

    C#日期格式化   在ASP.NET4.5中使用异步方法   C#枚举  C#异常精准定位  C#判断文件流类型 MVC3配置全局异常处理Web.config中设置CustomError  C#关于枚举(enum)类型与整型、字符串相互转换的总结 Web.configconfigSections自定义section    C#将DateTime.Now.DayOfWeek的值转为中文星期 WebConfig中的session超时详细设置 Web.config中sessionState节点的配置方案  自定义web.config配置节   Web.config中configSections 

  • 2019年全国新课标I卷文理科数学LaTeX排版试题与解析

    整体分析,没有偏怪难题之分,中等题偏多,题目较往年有题型改动变化,但难度还称不上很难。具体内容贴上链接! https://mp.weixin.qq.com/s/WKXhCKI_-z3UT-zUwI23Lg 全国1卷文理科试题与解析共4套,文档pdf中均以写到其详解内容,可进行下载! https://hoganbin.top/post/1780964907/

  • vscode常用插件小结

    最近开始使用vscode作为编辑器来补充sublime上用起来不方便的地方,尤其是在写markdown文档的时候,这里把几个用起来感觉还不错的插件做个小结: 1.BracketPairColorizer 括号匹配插件; 2.MarkdownAllinOne 写markdown用的插件,集成了大部分常用功能; 3.MarkdownPreviewEnhanced 写markdown预览和导出的插件; 4.SublimeTextKeymapandSettingsImporter 把sublime快捷键习惯保留到vscode里(PS:看了这个插件的下载量,看来从sublime转向vscode的人不少啊); 5.TabNine 智能补全很好用的插件(PS:是一个国外学生写的,还靠这个赚了第一桶金); 6.TrailingSpaces 标记处多余的空格插件; 7.VSCodeGreatIcons 图标插件,方便一眼看出来是啥文件;            

  • 首发|创业3年半,做8款App全部扑街;转做公众号5个月,零成本吸粉12万还拿了百万天使轮

    随着微信公众号数量呈井喷式增加,这个曾经令无数创业者着迷的新媒体阵地已开始散发出阵阵寒意。然而,在老从业者们纷纷哀叹力不从心的同时,却仍有一批后进场者逆流而上,成为新晋“10万+”量产机。 “口袋育儿”是一个面向中产阶级父母,提供0-3岁科学育儿知识的公众号。投入运营仅5个月,就已经吸粉12万且在近期获得了人民币百万级天使轮(投资方为浙商创投和杭州盈动资本)。重点是,这是在零推广成本的情况下,纯靠内容做出来的成绩。 创业邦(微信搜索关注:ichuangyebang)找到口袋育儿创始人麦田,邀请他分享自己的创业心得和内容秘笈。 创业三年半,做砸8款App 麦田是个不折不扣的创业老兵,百度系出身,在亲子育儿领域已足足折腾了四年。在运营公众号前的三年半时间里,他前后尝试开发了8款App,纯电商、O2O、问答社区、导购平台、海淘……应有尽有,却均已失败告终。 总结一下之前的失败经验,麦田认为最重要的原因是: “我们希望用好内容作为商业模式的入口,但移动应用本身并不具备内容传播的环境。它自身封闭且远离人群,产出再多的好内容也逃不开“墙内开花墙内香”的厄运,我们之前太过于执着App的产品形态,选

相关推荐

推荐阅读