微信小程序横向滚动正确姿势
<1>xml文件
<view>
<scroll-view scroll-x class="scroll-header">
<view class="wrap1" wx:for="{{lists}}">
<text class="textLine2">{{item.name}}</text>
</view>
</scroll-view>
</view>
<2>wxss文件
.scroll-header {
display: flex;
white-space: nowrap;
} .scroll-header view {
height: 50rpx;
width: 200rpx;
display: inline-block;
}
有两点需要注意:下面两个必须要加上。
(1)white-space: nowrap; 表示规定段落中的文本不进行换行:
(2)display: inline-block; 主要的用处是用来处理行内非替换元素的高宽问题的
微信小程序横向滚动正确姿势的更多相关文章
- 微信小程序横向滚动
<scroll-view scroll-x="true" style=" white-space: nowrap; display: flex" > ...
- 微信小程序-通知滚动小提示
代码地址如下:http://www.demodashi.com/demo/14044.html 一.前期准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.co ...
- 微信小程序scroll-view滚动一次多次触发的问题解决方案
最近使用微信小程序开发的时候,需要用scroll-view的bindscrolltolower事件,控制加载下一页的内容.但是发现在ios里,下拉滚动一次,事件触发两次,导致重复加载数据. 经过百度和 ...
- 微信小程序—picker(滚动选择器)
官方api:https://mp.weixin.qq.com/debug/wxadoc/dev/component/picker.html 上边是官网的api.小程序中,底部下拉滚动选择主要有这几种 ...
- 微信小程序实现滚动视频自动播放(未优化)
先看看大概效果 1.首先需要了解微信API: wx.createIntersectionObserver(Object component, Object options) 创建并返 ...
- 微信小程序实现滚动加载更多
1.需要用到的组件和api scroll-view(可滚动视图区域) wx.showToast(OBJECT)显示消息提示窗----显示loading小菊花用的 2.需要用到的属性 3.scrol-v ...
- 微信小程序bnner滚动
首先是轮播图,autoplay 自动播放,interval 轮播的时间,duration 切换速度,可以根据自己需求去添加. Delete:是删除按钮,加载进来是隐藏的,需用户点轮播图进去后,轮播图全 ...
- 微信小程序——<scroll-view>滚动到最底部
最近在做个直播间,有个这样的需要,就是进入到页面,<scroll-view>需要滚动到最底部,并且发送消息之后自动的滚动到底部. 开始想着计算里面内容的高度,然后通过设置 scroll-t ...
- 微信小程序左右滚动公告栏效果
<view class='notice-wrap' hidden='{{hideNotice}}'> <view class='tongzhitext'> <text c ...
随机推荐
- Django ModelForm操作及验证
一.内容回顾 Model - 数据库操作 - 验证 class A(MOdel): user = email = pwd = Form - class LoginForm(Form): email = ...
- python基础--面向对象之封装
# 在python中用双下划线,开头的方式将属性隐藏起来(设置成私有的) # 但其实这只是一种变形操作,而且仅仅在类定义阶段会发生变形 # 类中所有双下划线开头的如__x都会在类定义的时候自动形成:_ ...
- [转帖]oracle备份恢复之recover database的四条语句区别
oracle备份恢复之recover database的四条语句区别 https://www.cnblogs.com/andy6/p/5925433.html 需要学习一下. 1 recover d ...
- Excel透视表进阶之计算字段、计算项、切片器、页面布局
计算字段 在透视表的字段列表中通过函数.公式等方式构建一个新的字段 又称虚拟字段,因为计算字段不会出现在数据源中,对于普通字段的操作,都可以对计算字段进行操作 计算字段只能出现在值区域,不能出现在筛选 ...
- 即时通讯IM
即时通讯(Instant Messaging,后简称im)消息的可靠投递 一.报文类型 im的客户端与服务器通过发送报文(也就是网络包)来完成消息的传递 报文分为: 请求报文(request,后简称为 ...
- 克隆完虚拟机后修改网卡,修改静态IP
命令:vim /etc/sysconfg/network-scripts/ifcfg-eth0 编辑: vi /etc/udev/rules.d/70-persistent-net.rules 克隆 ...
- 用Python制作动态二维码
参考来源链接:https://mp.weixin.qq.com/s/p-ptQZD6_bjUhmU822OPww 今天在最大的同性交友社区GitHub上发现了一个比较有意思的项目,无论你是什么操作系统 ...
- gitlab 安装、配置
gitlab 安装.配置 对于企业级的私有 git 仓库,gitlab 是个不错的选择. 今天就来说说 gitlab 的安装.配置. 系统配置建议:最低双核 4G 内存. 当前针对 gitlab 版本 ...
- 786B - Legacy(线段树 + 最短路)线段树优化建图
题意: 就是给定一张n nn个点的图,求源点s ss到每个点的单源最短路.这张图共有q组边,连边方式有3种: a→b ,边权为w的单向边:a→[l,r] ,即a到连续区间[l,r]中的每一个点都有一条 ...
- Java基础——Modifier类
转自:https://www.cnblogs.com/baiqiantao/p/7478523.html 反射 Reflect Modifier 修饰符工具类 在查看反射相关的Class.Fiel ...