微信小程序之——实现一行滑动显示很多文字-scroll-view

工作所需接触到小程序的需求，记录下一点小问题。

=========================================================
目标是为了一行可以滑动地区显示很多文字，查了下资料发现可以设置一行隐藏，或者直接显示…，都可以，但是我这边需要把多余的文字也展示出来，而且不能改变样式，话不多说直接上效果：

附上完整代码
wxml：


<scroll-view scroll-x="true" style=" width: 600rpx; height: 500rpx;" class="scroll_display"><text class="test_display"> 人的一生只有5%是精彩的，只有5%是痛苦的，另外的90%是平淡的;人们往往被5%的精彩诱惑着，忍受着5%的痛，在90的平淡中度过 </text>
</scroll-view>

wxss：

.test_display {font-size: 35rpx;vertical-align: middle;margin-right: -2000rpx; /*  影响一行存放的内容长度 */display: inline-block;}.scroll_display {width: 50%;height: 20rpx;font-size: 35rpx;vertical-align: middle;padding-left: 60rpx;
}

是不是很简单？刚开始接触，欢迎批评指正~~~

微信小程序之——实现一行滑动显示很多文字-scroll-view相关推荐

微信小程序背景图片全屏显示
微信小程序背景图片全屏显示很多人在写小程序界面的时候希望背景图片是全屏覆盖显示的(包括顶部导航栏,如下图),那该如何实现呢? 以下是实现代码: wxml代码: <view class=&quo ...
微信小程序顶部搜索框滑动伸缩效果的实现
项目场景:微信小程序顶部搜索框随页面滑动伸缩效果提示:实现搜索框跟随用户滑动页面,实现伸缩效果微信小程序顶部搜索框滑动伸缩动画的实现实现效果: 滑动前滑动后实现原理提示:主要用到了微信小 ...
微信小程序背景图真机显示不了
微信小程序在本地开发工具正常显示图片(包括背景图),在真机显示不了,常见的几种情况: 1.微信小程序背景图真机显示不了微信小程序如何设置背景图片? | 微信开放社区微信小程序设置背景图片不显示问题 ...
微信小程序加载并且编译显示富文本编辑器内容
微信小程序如何加载并且显示百度编辑器中的内容一. 下载wxParse文件夹放在根目录下(可以随意更改位置,只要后续能引入成功即可) 二. 在js文件中引入wxParse.js var WxParse ...
微信小程序中苹果iOS手机显示时间格式NaN不正确的问题
项目场景: 实现安卓Android和苹果iOS中微信小程序显示订单时间信息问题描述微信小程序中苹果iOS手机显示时间格式NaN不正确的问题原因分析: 安卓微信小程序显示正常,苹果按格式YYYY- ...
微信小程序关注公众号模板显示隐藏问题
微信小程序关注公众号模板显示隐藏问题最近做了一个微信小程序内跳转关注公众号的需求,本来按照API的写法是可以直接搞定的.但是产品需求是要点击按钮之后,再弹出关注公众号组件,然后点击关闭按钮之后要关掉 ...
微信小程序禁止页面左右滑动
微信小程序禁止页面左右滑动小程序禁止页面左右滑动 PS:在开发过程中可能会遇到某一个页面可以左右滑动,在开发者工具是查看不出来,只有在手机预览才可以看的出来(尝试左或者右滑动). 我的解决方法是在根 ...
微信小程序：video标签默认显示视频的第一帧作为封面
微信小程序:video标签默认显示视频的第一帧作为封面 <video src="video_url"controls="{{false}}"initial ...
微信小程序界面从右边滑出_微信小程序页面溢出左右滑动问题
微信小程序页面中view设置width:100%之后,页面右边会多出一块白区域,并且可以左右滑动,解决方法是给这个view加一个box-sizing:border-box; 欢迎使用Markdown ...
微信小程序页面溢出左右滑动问题
微信小程序页面中view设置width:100%之后,页面右边会多出一块白区域,并且可以左右滑动,解决方法是给这个view加一个box-sizing:border-box; 欢迎使用Markdown ...

微信小程序之——实现一行滑动显示很多文字-scroll-view

微信小程序之——实现一行滑动显示很多文字-scroll-view相关推荐

最新文章

热门文章