<scroll-view class="box" scroll-x="true" >
<view class="box-item" ></view>
<view class="box-item" ></view>
<view class="box-item" ></view>
</scroll-view>
.box {
width:100vw;
height: 200rpx;
white-space: nowrap; /*white-space 不能丢*/
border: 1px solid red;
box-sizing: border-box
} .box-item {
width: 45%;
height:100%;
border:2rpx solid green;
box-sizing: border-box;
display: inline-block
}


小程序scroll-view 使用的更多相关文章

  1. 微信小程序 -- scroll view

    效果图:横向滚动和纵向滚动 scroll view使用方法文档,前面已经介绍查找文档方法,此处不再赘述 一.横向滚动 创建一个页面scroll-nav 然后,在.wxml文件中排版 <!--水平 ...

  2. 关于微信小程序获取view的动态高度填坑

    wx.createSelectorQuery().select('#box').boundingClientRect(function (rect) { width = rect.width heig ...

  3. 微信小程序scroll标签的测试

    一:testscroll.wxml的代码如下.testview.js自动生成示例代码 //testscroll.wxml <view class="section__title&quo ...

  4. 小程序获取view元素的高度

    页面wxml <!--page/index/index.wxml--> <view id='demo'> <text>哈哈哈哈哈</text> < ...

  5. 【微信小程序】view顶部固定或底部固定 + scroll-view中的元素view也可以使用position:fixed;固定选中元素位置

    1.顶端固定核心代码如下: <view class="page__hd" style="position:fixed; top:0;width: 750rpx;&q ...

  6. 微信小程序将view动态填满全屏

    一.在app.js利用官方方法获取设备信息,将获取到的screenHeight.windowHeight度量单位统一由rpx换算为px 注:官方文档给出 [rpx换算px (屏幕宽度/750)  ][ ...

  7. 关于小程序去除view/navigator 点击后默认阴影效果

    hover:class  :定义容器在被触发时的样式 通常无用,但若不去除则影响用户体验: 为避免被覆盖,约定在wxss底部添加class,比如: <!-- wxml --> <na ...

  8. 微信小程序踩坑集合

    1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461 2:简易教程:https://mp.weixin.qq.com/debu ...

  9. 原生开发小程序 和 wepy 、 mpvue 对比

    1.三者的开发文档以及介绍: 原生开发小程序文档:点此进入 wepy 开发文档:点此进入 mpvue 开发文档:点此进入 2.三者的简单对比: 以下用一张图来简单概括三者的区别: 小程序支持的是 WX ...

  10. 微信小程序~基础组件

    (1)视图容器 名称 功能说明 movable-view 可移动的视图容器,在页面中可以拖拽滑动 cover-image 覆盖在原生组件之上的图片视图 cover-view 覆盖在原生组件之上的文本视 ...

随机推荐

  1. java TCP 通信:服务端与客服端

    1.首先先来看下基于TCP协议Socket服务端和客户端的通信模型: Socket通信步骤:(简单分为4步) 1.建立服务端ServerSocket和客户端Socket 2.打开连接到Socket的输 ...

  2. 10 loader - 配置处理less文件的loader

    第一步:装包 cnpm i less-loader -D 安装完提示警告 peerDependencies WARNING less-loader@* requires a peer of less@ ...

  3. 【Java】Eclipse+环境安装及新建Project

    安装Eclipse 1.进入ecilpse官方下载地址:https://www.eclipse.org/downloads/?FEATURED_STORY 2.点击红色箭头指向的Download Pa ...

  4. Maven dependencies說明

    一.今天搭建了一个maven项目,在pom.xml文件引入依赖后,发现项目结构中没有Maven Dependencies文件(下图),但是在java Build Path中又可以找到Maven Dep ...

  5. 安装pip的三种方式

    pip是python的一个工具,用来安装python包特别方便.Linux系统是是内置python程序,因为许多Linux内置文件都是使用python来编写的,比如说yum. 1.脚本安装 通过脚本的 ...

  6. Greenplum 调优--VACUUM系统表

    Greenplum 调优--VACUUM系统表 1.VACUUM系统表原因 Greenplum是基于MVCC版本控制的,所有的delete并没有删除数据,而是将这一行数据标记为删除, 而且update ...

  7. 【概率论】5-3:超几何分布(The Hypergeomtric Distribution)

    title: [概率论]5-3:超几何分布(The Hypergeomtric Distribution) categories: - Mathematic - Probability keyword ...

  8. Ubuntu输入ifconfig找不到IP地址,只有lo问题

    首先我的问题是这样的 然后一顿神百度,要找到你之前用的网卡或者设备,ifconfig -a,然后好用,出来了 但是并没有IP地址什么的,网上给的重启命令也没有用 输入的命令是:ifconfig ens ...

  9. 01.Flink笔记-编译、部署

    Flink开发环境部署配置 Flink是一个以Java及Scala作为开发语言的开源大数据项目,代码开源在github上,并使用maven来编译和构建项目.所需工具:Java.maven.Git. 本 ...

  10. javascript的this与prototype的区别

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...