微信小程序实现列表的横向滑动方式


Posted in Javascript onJuly 15, 2020

微信小程序原生方式实现列表的横向滑动的两种方法:

效果图:

微信小程序实现列表的横向滑动方式

方式一:简单样式实现

父元素设置:

white-space:nowrap;//不换行
overflow-x: auto;子元素设置:
display:inline-block;

方式二:scroll-view 标签 + 样式

scroll-view的横向滚动:

  • scroll-view的内层view元素需要:display:inline-block;
  • scroll-view的外层元素需要:white-space:nowrap;

实现代码:

1.wxml

<!--pages/packageA//multiple-function/multiple-function.wxml-->
<view class="content">
   <view class="Btn">
     <view class="clickBtn" data-id="" bindtap = "toClickTab">返回功能列表页</view>
   </view>
   <view>实现横向滚动效果:</view>
   <view style="margin-top: 60rpx;">
     方式一:<view>父元素设置 white-space:nowrap;//不换行 overflow-x: auto;</view>
        <view>子元素设置display:inline-block;</view>
   </view>
   <view class="listContent">
     <view class="item" wx:for="{{userList}}" wx:key="{{index}}">
       <image class="userAvatar" src="{{item.avatar}}" mode="aspectFit"/>
       <view class="userName">{{item.userName}}</view> 
     </view>
   </view> 
   <view style="margin-top: 60rpx;margin-bottom: 20rpx;">
    <view>方式二:scroll-view的横向滚动:</view>
    <view>scroll-view的内层view元素需要:display:inline-block;</view>
    <view>scroll-view的外层元素需要:white-space:nowrap;</view>
  </view>
  <view style="white-space:nowrap">
    <scroll-view scroll-x>
      <view class="listContent2">
        <view style="display: inline-block;" class="item2" wx:for="{{userList}}" wx:key="{{index}}">
          <image class="userAvatar" src="{{item.avatar}}" mode="aspectFit"/>
          <view class="userName">{{item.userName}}</view> 
        </view>
      </view> 
    </scroll-view>
  </view>
</view>

2.js

// pages/packageA//multiple-function/multiple-function.js
Page({

 /**
  * 页面的初始数据
  */
 data: {
  userList:[
   {'id':"1","avatar":"../../../images/tarbar/my-selected.png","userName":"用户1"},
   {'id':"2","avatar":"../../../images/tarbar/my-selected.png","userName":"用户2"},
   {'id':"3","avatar":"../../../images/tarbar/my-selected.png","userName":"用户3"},
   {'id':"4","avatar":"../../../images/tarbar/my-selected.png","userName":"用户4"},
   {'id':"5","avatar":"../../../images/tarbar/my-selected.png","userName":"用户5"},
   {'id':"6","avatar":"../../../images/tarbar/my-selected.png","userName":"用户6"},
   {'id':"7","avatar":"../../../images/tarbar/my-selected.png","userName":"用户7"},
   {'id':"8","avatar":"../../../images/tarbar/my-selected.png","userName":"用户8"},
   {'id':"9","avatar":"../../../images/tarbar/my-selected.png","userName":"用户9"},
   {'id':"10","avatar":"../../../images/tarbar/my-selected.png","userName":"用户10"},
   {'id':"11","avatar":"../../../images/tarbar/my-selected.png","userName":"用户11"},
  ]
 },

 /**
  * 生命周期函数--监听页面加载
  */
 onLoad: function (options) {

 },

 /**
  * 生命周期函数--监听页面显示
  */
 onShow: function () {

 }
})

3.wxss

/* pages/packageA//multiple-function/multiple-function.wxss */
page{
 width: 100%;
 height: 100%;
 background: #f7f7f7;
}
.main{
 width:100%;
 margin-top: 60rpx;
 position: relative;
}
.row{
 display: flex;
 flex-direction: row;
 align-items: center;
 height: 100rpx;
 background: #ffffff;
}
.hintText{
 width:90%;
 font-size: 28rpx;
 color:#000000;
 font-family: PingFang SC;
 font-weight: 400;
 padding-left: 30rpx;
}
.rightArrow{
 width:36rpx;
 height: 36rpx;
}
.line{
 margin-left: 30rpx;
 height: 1px;
 background: #eeeeee;
}

/*列表项*/
.listContent{
 width:100%;
 margin-top: 20rpx;
 white-space: nowrap;/*父元素 一行显示,不换行*/
 overflow-x: auto;

}
.item{
 display: inline-block;/*子元素 display: inline-block*/
 width:20%;
 height: 100rpx;
 text-align: center;
}
.userAvatar{
 width:60rpx;
 height: 60rpx;
}
/*用户名*/
.userName{
 font-size: 28rpx;
 color:#acacac
}



/*列表项*/
.listContent2{
 width:100%;
}
.item2{
 width:20%;
 height: 100rpx;
 text-align: center;
}

/*去除下划线的线条*/
::-webkit-scrollbar{
 width:0;
 height: 0;
 color: transparent;
}

.viewBtn{
 width: 100%;
 height: 80rpx;
 padding-top: 20rpx;
}
/*返回按钮*/
.clickBtn{
 width:250rpx;
 line-height: 1;
 font-size: 32rpx;
 font-weight: 600;
 padding: 24rpx 0;
 background-color: #07c160;
 color:#ffffff;
 margin-left: 20rpx;
 border-radius: 10rpx;
 text-align: center;
}

到此这篇关于微信小程序实现列表的横向滑动的文章就介绍到这了,更多相关微信小程序的横向滚动内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
用js实现的一个Flash滚动轮换显示图片代码生成器
Mar 14 Javascript
Extjs在exlipse中设置自动提示的方法
Apr 07 Javascript
iframe 上下滚动条如何默认在下方实现原理
Dec 10 Javascript
使用jQuery实现星级评分代码分享
Dec 09 Javascript
jQuery中[attribute]选择器用法实例
Dec 31 Javascript
详解AngularJS过滤器的使用
Mar 11 Javascript
jQuery中的基本选择器用法学习教程
Apr 14 Javascript
Jquery跨域获得Json的简单实例
May 18 Javascript
javascript设计模式之模块模式学习笔记
Feb 15 Javascript
微信小程序实现给循环列表添加点击样式实例
Apr 26 Javascript
Angular通过angular-cli来搭建web前端项目的方法
Jul 27 Javascript
@angular前端项目代码优化之构建Api Tree的方法
Dec 24 Javascript
JavaScript之scrollTop、scrollHeight、offsetTop、offsetHeight等属性学习笔记
Jul 15 #Javascript
JavaScript实时更新当前的时间的示例代码
Jul 15 #Javascript
jQuery 添加元素和删除元素的方法
Jul 15 #jQuery
vue如何在项目中调用腾讯云的滑动验证码
Jul 15 #Javascript
Vue中keep-alive的两种应用方式
Jul 15 #Javascript
js实现浏览器打印功能的示例代码
Jul 15 #Javascript
详解Vue中的MVVM原理和实现方法
Jul 15 #Javascript
You might like
多文件上载系统完整版
2006/10/09 PHP
PHP下一个非常全面获取图象信息的函数
2008/11/20 PHP
微信支付开发发货通知实例
2016/07/12 PHP
基于PHP+Mysql简单实现了图书购物车系统的实例详解
2020/08/06 PHP
javascript之卸载鼠标事件的代码
2007/05/14 Javascript
js中通过split函数分割字符串成数组小例子
2013/09/21 Javascript
javascript实现淡蓝色的鼠标拖动选择框实例
2015/05/09 Javascript
基于jQuery全屏焦点图左右切换插件responsiveslides
2015/09/07 Javascript
JS实现单击输入框弹出选择框效果完整实例
2015/12/14 Javascript
js不间断滚动的简单实现
2016/06/03 Javascript
[Bootstrap-插件使用]Jcrop+fileinput组合实现头像上传功能实例代码
2016/12/20 Javascript
jQuery自定义插件详解及实例代码
2016/12/29 Javascript
js控制一个按钮是否可点击(可使用)disabled的实例
2017/02/14 Javascript
React操作真实DOM实现动态吸底部的示例
2017/10/23 Javascript
基于JavaScript实现瀑布流布局
2018/08/15 Javascript
js实现input密码框显示/隐藏功能
2020/09/10 Javascript
vue-cli2 构建速度优化的实现方法
2019/01/08 Javascript
vue实现element表格里表头信息提示功能(推荐)
2019/11/20 Javascript
[59:30]完美世界DOTA2联赛PWL S3 access vs LBZS 第二场 12.20
2020/12/23 DOTA
Python判断操作系统类型代码分享
2014/11/22 Python
利用python写个下载teahour音频的小脚本
2017/05/08 Python
Python删除Java源文件中全部注释的实现方法
2017/08/30 Python
matplotlib给子图添加图例的方法
2018/08/03 Python
OpenCV图像颜色反转算法详解
2019/05/13 Python
matplotlib.pyplot画图并导出保存的实例
2019/12/07 Python
Python3打包exe代码2种方法实例解析
2020/02/17 Python
django 读取图片到页面实例
2020/03/27 Python
Python Pandas 对列/行进行选择,增加,删除操作
2020/05/17 Python
Python的Django框架实现数据库查询(不返回QuerySet的方法)
2020/05/19 Python
使用HTML5中的contentEditable来将多行文本自动增高
2016/03/01 HTML / CSS
详解html2canvas截图不能截取圆角图片的解决方案
2018/01/30 HTML / CSS
中国电子产品外贸网站:MiniIntheBox
2017/02/06 全球购物
对祖国的寄语大全
2014/04/11 职场文书
技术员个人工作总结
2015/03/03 职场文书
Python 实现定积分与二重定积分的操作
2021/05/26 Python
安装Ruby和 Rails的详细步骤
2022/04/19 Ruby