脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → 微信小程序 scroll-view 水平滚动实现过程

微信小程序 scroll-view 水平滚动实现过程解析

 更新时间：2019年10月12日 14:40:57   作者：Zero_追梦  
这篇文章主要介绍了微信小程序 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/wukecheng@2x.png" 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/wukecheng@2x.png" 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/wukecheng@2x.png" 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/wukecheng@2x.png" 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. 效果如下：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • 详解js前端代码异常监控

    详解js前端代码异常监控

    本文主要介绍了js代码异常监控的相关知识。具有一定的参考价值，下面跟着小编一起来看下吧
    2017-01-01
  • JavaScript实现网页下拉菜单效果

    JavaScript实现网页下拉菜单效果

    这篇文章主要为大家详细介绍了JavaScript实现网页下拉菜单效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-11-11
  • Nuxt.js开启SSR渲染的教程详解

    Nuxt.js开启SSR渲染的教程详解

    Nuxt.js 是一个基于 Vue.js 的通用应用框架。 通过对客户端/服务端基础架构的抽象组织，Nuxt.js 主要关注的是应用的 UI渲染。这篇文章主要介绍了Nuxt.js开启SSR渲染 ,需要的朋友可以参考下
    2018-11-11
  • js实现上传图片预览的方法

    js实现上传图片预览的方法

    这篇文章主要介绍了js实现上传图片预览的方法,通过自定义函数结合onchange方法实现上传图片的预览功能,非常具有实用价值,需要的朋友可以参考下
    2015-02-02
  • js或jquery实现页面打印可局部打印

    js或jquery实现页面打印可局部打印

    这篇文章主要介绍了js或jquery如何实现页面打印也可局部打印,需要的朋友可以参考下
    2014-03-03
  • 详谈js遍历集合(Array,Map,Set)

    详谈js遍历集合(Array,Map,Set)

    下面小编就为大家带来一篇详谈js遍历集合(Array,Map,Set)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-04-04
  • JavaScript各类型的关系图解

    JavaScript各类型的关系图解

    这篇文章主要通过一张图让你看懂JavaScript各类型的关系，需要的朋友可以参考下
    2015-10-10
  • 基于JS实现无缝滚动思路及代码分享

    基于JS实现无缝滚动思路及代码分享

    无缝滚动效果在各大网站都有这样的需求，应用非常广泛，下面小编给大家分享基于JS实现无缝滚动思路及代码，非常不错具有参考借鉴价值，感兴趣的朋友一起看下吧
    2016-06-06
  • JavaScript控制图片360度旋转代码

    JavaScript控制图片360度旋转代码

    JavaScript控制一张图片旋转，每次旋转90度，可旋转一周360度，以前没见到过，也不知道有没有用，奉献给大家，希望喜欢
    2011-12-12
  • vml圆角矩形最简布局

    vml圆角矩形最简布局

    2006-09-09

最新评论