微信小程序 scroll-view 水平滚动使用

1. scroll-view水平滚动使用

1. wxml

<scroll-view class="scroll-wrap" scroll-x>
      <view class="scroll-view-item">
        <view class="scroll-img-wrap scroll-major-img-wrap">
          <image src="../../images/[email protected]" class="img-responsive" />
        </view>
        <text class="scroll-title scroll-major-title">膳食与营养膳食与营养膳食...</text>
      </view>
      <view class="scroll-view-item">
        <view class="scroll-img-wrap scroll-major-img-wrap">
          <image src="../../images/[email protected]" class="img-responsive" />
        </view>
        <text class="scroll-title scroll-major-title">膳食与营养膳食与营养膳食...</text>
      </view>
      <view class="scroll-view-item">
        <view class="scroll-img-wrap scroll-major-img-wrap">
          <image src="../../images/[email protected]" class="img-responsive" />
        </view>
        <text class="scroll-title scroll-major-title">膳食与营养膳食与营养膳食...</text>
      </view>
      <view class="scroll-view-item">
        <view class="scroll-img-wrap scroll-major-img-wrap">
          <image src="../../images/[email protected]" class="img-responsive" />
        </view>
        <text class="scroll-title scroll-major-title">膳食与营养膳食与营养膳食...</text>
      </view>
    </scroll-view>

2. wxss

.scroll-wrap {
  min-width: 100%;
  height: 360rpx;
  white-space: nowrap; /*不可缺少*/
}
.scroll-view-item {
 width: 68%;
  height: 360rpx;
  display: inline-block; // 可以使每一项水平排列
}
.scroll-view-item + .scroll-view-item {
  margin-left: 16rpx;
}
::-webkit-scrollbar{ // 隐藏滚动条
    width: 0;
    height: 0;
    color: transparent;
}
 .scroll-img-wrap {
  width: 100%;
  height: 280rpx;
  overflow: hidden;
  border-radius: 8rpx;
}
.scroll-title {
   white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}
.scroll-major-img-wrap {
  height: 280rpx;
}
.scroll-major-title {
  margin: 16rpx 8rpx;
}   

2. scroll-view 隐藏滚动条

::-webkit-scrollbar{
    width: 0;
    height: 0;
    color: transparent;
}

3. 效果如下:

原文地址:https://www.cnblogs.com/zero-zm/p/11624863.html

时间: 2024-11-07 11:58:20

微信小程序 scroll-view 水平滚动使用的相关文章

微信小程序之x轴滚动

10.1快乐 微信小程序之x轴滚动 具体请参考: https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html   原文地址:https://www.cnblogs.com/home-/p/11607078.html

微信小程序实现(禁止页面滚动、长按复制)

1. 禁止页面滚动对于小程序某些一屏的页面,特别是全屏的swiper,并不希望页面在竖直方向上可以滚动. 实现方式:在需要禁止滚动页面的json中加入: "disableScroll": true 1 注意:只在页面配置中有效,无法再app.json中设置该项 参考:https://developers.weixin.qq.com/miniprogram/dev/framework/config.html#页面配置 2. 长按复制 <text class='copy_conten

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

一.在app.js利用官方方法获取设备信息 App({ onLaunch: function() { wx.getSystemInfo({ success: res => { this.globalData.systemInfo = res } }) }, globalData: { systemInfo: null } }) 获取到的windowWidth.windowHeight等度量单位为 px 二.在要使用的页面的js文件里将单位统一为rpx const app = getApp() P

微信小程序的view标签中text如何居中?

display:flex; align-items:center; justify-content:center; 原文地址:https://www.cnblogs.com/lsyy2017/p/11128497.html

微信小程序 解决 view 文字 过多 溢出的问题,超过行数后隐藏显示省略号

多行文本 .note_item text { display: -webkit-box; font-size: 28rpx; color: #000000; line-height: 40rpx; word-break: break-all; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; text-overflow: ellipsis; } 单行文本 .note2_item text { displa

微信小程序--图片相关问题合辑

图片上传相关文章 微信小程序多张图片上传功能 微信小程序开发(二)图片上传 微信小程序上传一或多张图片 微信小程序实现选择图片九宫格带预览 ETL:微信小程序之图片上传 微信小程序wx.previewImage预览图片 微信小程序之预览图片 小程序开发:上传图片到腾讯云 .NET开发微信小程序-上传图片到服务器 微信小程序本地图片处理--按屏幕尺寸插入图片 [微信小程序]上传图片到阿里云OSS Python Flask小程序文件(图片)上传技巧 小程序图片上传阿里OSS使用方法 微信小程序问题汇

1万字!彻底看懂微信小程序

Q:为什么说小程序如炮友? A:小程序刚发布不久就流行一个段子:APP如原配,一年不用几次:服务号如情人,一个月固定几次:订阅号如酒店小卡片,天天可以卖广告:小程序像炮友,用完就走. 资本如嫖客,各个平台和垂直类掠夺者已经瓜分掉了线上流量,那么未来争夺的流量战场必然在实体场景,很多巨头其实已经证明了线下流量庞大的潜力.在快递包裹上印上自己的二维码关注公众号形成二次寄出快递的粘性,PokemonGo让用户在实体地图上捕获小精灵. 未来的入口不限于二维码,而是一切的富媒体.二维码之于2D识别,复杂图

如何入门微信小程序开发

最近微信开发小程序挺火的,自己选择了腾讯云官方推出的相册. 先下载: 破解版IDE下载地址,以及使用说明: http://download.csdn.net/detail/richard_jason/9660819 http://download.csdn.net/detail/richard_jason/9660821 这里由于csdn有上传大小限制,所以只能做两次上传了.要放在一起看哦. 安装步骤 一个步骤都不能错哦 1.安装0.7 - 扫码登陆 - 关闭0.7 2.安装0.9 --不要启动

一个小时快速搭建微信小程序

「小程序」这个划时代的产品发布快一周了,互联网技术人都在摩拳擦掌,跃跃欲试.可是小程序目前还在内测,首批只发放了 200 个内测资格(泪流满面).本以为没有 AppID 这个月就与小程序无缘了,庆幸的是微信这两天发布了正式版开发者工具,无需内测邀请也可以尝鲜了. 因此也就有了我与「小程序」的初体验,而我的感受只有一个字--爽! 选择哪个「小程序」Demo? 在知名同性交友网站 Github 上,「小程序」的 Demo 不少,但是大多只是简单的 API 演示,有的甚至直接把页面数据写在了 json

微信小程序如何像vue一样在动态绑定类名

微信小程序如何像vue一样在动态绑定类名 更新时间:2018年04月17日 14:08:44 这篇文章主要介绍了微信小程序如何像vue一样在动态绑定类名,文中给大家提到了vue与微信小程序的区别,需要的朋友可以参考下 小程序 开发中遇到这样一个问题... 排行榜开发的时候,前三名的样式不同,其余的样式一样.但是都是通过同一元素来遍历的,当时卡了一下.后来发现有module模块化这一概念,于是查了下api,一下子就做出来了. 就是不同名次上边的样式根据实际情况展示效果. 模块化 我们可以将一些公共