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


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 相关文章推荐
JavaScript 监听textarea中按键事件
Oct 08 Javascript
浅析JavaScript中的类型和对象
Nov 29 Javascript
封装了jQuery的Ajax请求全局配置
Feb 05 Javascript
JavaScript定时显示广告代码分享
Mar 02 Javascript
Node.js实用代码段之正确拼接Buffer
Mar 17 Javascript
vue.js绑定class和style样式(6)
Dec 09 Javascript
浅谈Vue的基本应用
Dec 27 Javascript
从零学习node.js之简易的网络爬虫(四)
Feb 22 Javascript
Angular4如何自定义首屏的加载动画详解
Jul 26 Javascript
Vue利用路由钩子token过期后跳转到登录页的实例
Oct 26 Javascript
Vue CLI 2.x搭建vue(目录最全分析)
Feb 27 Javascript
JS中封装axios来管控api的2种方式
Sep 11 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
连接到txt文本的超链接,不直接打开而是点击后下载的处理方法
2009/07/01 PHP
discuz的php防止sql注入函数
2011/01/17 PHP
yii操作session实例简介
2014/07/31 PHP
js+数组实现网页上显示时间/星期几的实用方法
2013/01/18 Javascript
究竟什么是Node.js?Node.js有什么好处?
2015/05/29 Javascript
jQuery复制表单元素附源码分享效果演示
2015/09/30 Javascript
jquery无限级联下拉菜单简单实例演示
2015/11/23 Javascript
jQuery的内容过滤选择器学习教程
2016/04/18 Javascript
学习Bootstrap滚动监听 附调用方法
2016/07/02 Javascript
原生js实现吸顶效果
2017/03/13 Javascript
AngularJS 单选框及多选框的双向动态绑定
2017/04/20 Javascript
bootstrap响应式表格实例详解
2017/05/15 Javascript
使用vue构建移动应用实战代码
2017/08/02 Javascript
解决angular2在双向数据绑定时[(ngModel)]无法使用的问题
2018/09/13 Javascript
微信小程序MUI导航栏透明渐变功能示例(通过改变opacity实现)
2019/01/24 Javascript
基于vue-cli搭建多模块且各模块独立打包的项目
2019/06/12 Javascript
Node.js API详解之 util模块用法实例分析
2020/05/09 Javascript
[10:18]2018DOTA2国际邀请赛寻真——找回自信的TNCPredator
2018/08/13 DOTA
Python的垃圾回收机制深入分析
2014/07/16 Python
TensorFlow模型保存/载入的两种方法
2018/03/08 Python
pandas使用apply多列生成一列数据的实例
2018/11/28 Python
在python带权重的列表中随机取值的方法
2019/01/23 Python
Python操作qml对象过程详解
2019/09/26 Python
PageFactory设计模式基于python实现
2020/04/14 Python
Python 抓取数据存储到Redis中的操作
2020/07/16 Python
中国专业的综合网上购物商城:京东
2016/08/02 全球购物
瑜伽服装品牌:露露柠檬(lululemon athletica)
2017/06/04 全球购物
荷兰音乐会和音乐剧门票订购网站:Topticketshop
2019/08/27 全球购物
业务经理岗位职责
2013/11/11 职场文书
大学生饮食配送创业计划书
2014/01/04 职场文书
酒店开业庆典主持词
2014/03/21 职场文书
节约能源标语
2014/06/17 职场文书
奥巴马经典演讲稿
2014/09/13 职场文书
签证工作证明模板
2015/06/15 职场文书
vue实现无缝轮播效果(跑马灯)
2021/05/14 Vue.js
vue实现列表拖拽排序的示例代码
2022/04/08 Vue.js