微信小程序横向滚动正确姿势
<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 ...
随机推荐
- java 对象转整数,两个整数相除转百分数
public class MathUtil { public static void main(String[] args) { System.out.println(toPercent(1,3)); ...
- Selenium 2自动化测试实战8(控制浏览器)
一.控制浏览器 1. 控制浏览器窗口大小 webdriver提供了set_window_size()方法来设置浏览器的大小 #test.py #coding:utf-8 from selenium i ...
- resultMap的使用总结
Mybatis:resultMap的使用总结 resultMap是Mybatis最强大的元素,它可以将查询到的复杂数据(比如查询到几个表中数据)映射到一个结果集当中. resultMap包含的元素 ...
- samba安装应用实例-1
应用实例:先安装samba软件,yum install -y samba1.需求:共享一个目录,任何人都可以访问,不用输密码,只读.(1)首先打开samba配置文件/etc/samba/smb.con ...
- fcitx无法切换到中文(manjaro)
安装fcitx后不能切换到中文输入法,在.bashrc或者.profile中添加以下代码: #fcitx export GTK_IM_MODULE=fcitx export QT_IM_MODULE ...
- java:Springmvc框架2(Ajax,Json,Interceptor,Upload,Exception)
1.springmvcAjax: springmvc.xml: <?xml version="1.0" encoding="UTF-8"?> < ...
- 基于 vue2 + vuex 构建一个具有 45 个页面的大型单页面应用
源码地址: https://github.com/bailicangdu/vue2-elm 技术栈 vue2 + vuex + vue-router + webpack + ES6/7 + fetch ...
- Unity2D RPG游戏开发日志
一.游戏构建设计 场景设计:地面的每一层用unity的TiledMap来设计,首先第一层为地面层,也就是地形的大部分区域的图块:第二层为覆盖层,如图中蓝色线圈起来的柱子的上半部分,由于玩家可以在柱子背 ...
- JSON中文处理类实例
$array = array( 'Name'=>'络恩', 'Age'=>24); $post=my_json_encode($array); // 这个函数是判断版本,如果是搞版本的则直 ...
- 【嵌入式开发】树莓派+官方摄像头模块+VLC串流实时输出网络视频流
sudo apt-get update sudo apt-get install vlc sudo raspivid -o - -t 0 -w 640 -h 360 -fps 25|cvlc -vvv ...