微信小程序 scroll-view的使用案例代码详解


Posted in Javascript onJune 11, 2020

scroll-view:滚动视图
使用view其实也能实现滚动,跟div用法差不多
scroll-viewview最大的区别就在于:scroll-view视图组件封装了滚动事件,监听滚动事件什么的直接写方法就行。

scroll-view纵向滚动添加属性scroll-y,然后写一个固定高度就行了,我主要说一下scroll-view的横向滚动scroll-x

我使用了display: flex;布局,特么的直接写在scroll-view上面,显示出来的结果总是不对头,试了好多次,得到了下面两种写法;

第二种在scroll-view上添加了enable-flex启用flex布局属性,启用后内部就能使用flex布局了,不然你会发现内部布局始终是纵向的。

得到的效果是一样的,能使用scroll-view事件。

wxml:

<view class="order_item_body">
	<scroll-view scroll-x="true" scroll-into-view="{{toView}}" scroll-left="{{scrollLeft}}">
		<view class="order_item_list">
			<view class="order_item_goods" wx:for="{{order.detail}}" wx:key="index" id="detail{{index}}">
				<image src="{{item.image}}" mode="widthFix"></image>
				<text>{{item.count+index}}</text>
			</view>
		</view>
	</scroll-view>
</view>

<scroll-view scroll-x bindscroll="scroll" scroll-into-view="{{toView}}" scroll-left="{{scrollLeft}}" enable-flex="{{true}}">
	<view class="order_item_list">
		<view class="order_item_goods" wx:for="{{order.detail}}" wx:key="index" id="detail{{index}}">
			<image src="{{item.image}}" mode="widthFix"></image>
			<text>{{item.count+index}}</text>
		</view>
	</view>
</scroll-view>

wxss:

.order_item_body{
	width: 100%;
	height: 196rpx;
}

.order_item_list{
	/* width: 100%; */
	height: 100%;
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
	/* border: 1px solid blue; */
}


.order_item_goods {
	width: 200rpx;
	height: 192rpx;
	position: relative;
}

.order_item_goods>image {
	width: 160rpx;
	height: 160rpx;
	margin: 16rpx 20rpx;
	border: 1px solid rgba(0, 0, 0, 0.5);
}

.order_item_goods>text {
	height: 30rpx;
	line-height: 30rpx;
	padding: 0rpx 5rpx;
	font-size: 24rpx;
	color: rgba(255, 255, 255);
	border-top-left-radius: 10rpx;
	background-color: rgba(0, 0, 0, 0.5);
	position: absolute;
	bottom: 16rpx;
	right: 20rpx;
}

效果图:

微信小程序 scroll-view的使用案例代码详解

求推荐一款免费且没有水印的gif制作软件,有水印看到就烦。

ps:下面看下微信小程序scroll-view的scroll-into-view无效如何解决

最近在写小程序项目遇到这么一个问题:在使用scroll-into-view的时候无效。

在网上查了一遍,给出的答案有:

1.给scroll-view要设置高度,必须设置上scroll-y或者scroll-x为true(必须要的)

2.scroll-into-view初始化设置的时候,可能因为页面或者数据未加载不能跳转。需要在js里手动setData一下。

一顿操作猛如虎,一看还是没有效果。还是接着找原因吧。。

最后发现,原来是在给scroll-view设置高度的时候,不能用%来设置高度,改成固定高度类似500rpx就可以了

最后贴上代码:

<view class="left" wx:for="{{cateItems}}" wx:key="{{cateItems}}">
	 <view class='title' bindtap="navItem">{{item.name}}</view>
</block>

<scroll-view class="right" scroll-y="true" scroll-into-view="{{ intoindex }}" style="height: 1100rpx;" scroll-with-animation>
	<view class="clearfix" wx:for="{{cateItems}}" id="intoindex{{item.id}}"></view>
</scroll-view>

Page({
 	data: {
		intoindex:''
 	},
	navItem(e){
		const that = this
		var id = e.target.id
		that.setData({
			intoindex:'intoindex'+id
		})
	}
})

总结

到此这篇关于微信小程序 scroll-view的使用案例代码详解的文章就介绍到这了,更多相关微信小程序 scroll-view的使用 内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
基于prototype的validation.js发布2.3.4新版本,让你彻底脱离表单验证的烦恼
Dec 06 Javascript
JavaScript 闭包在封装函数时的简单分析
Nov 28 Javascript
jQuery DOM操作小结与实例
Jan 07 Javascript
JavaScript学习点滴 call、apply的区别
Oct 22 Javascript
JS获取农历日期具体实例
Nov 14 Javascript
IE8中使用javascript动态加载CSS的解决方法
Jun 17 Javascript
使用js复制链接中的部分文字的方法
Jul 30 Javascript
JS+CSS实现下拉刷新/上拉加载插件
Mar 31 Javascript
JQuery form表单提交前验证单选框是否选中、删除记录时验证经验总结(整理)
Jun 09 jQuery
Vue表单demo v-model双向绑定问题
Jun 29 Javascript
原生JS实现旋转轮播图+文字内容切换效果【附源码】
Sep 29 Javascript
vue+elementUI动态增加表单项并添加验证的代码详解
Dec 17 Vue.js
基于ajax及jQuery实现局部刷新过程解析
Sep 12 #jQuery
微信小程序scroll-view实现滚动到锚点左侧导航栏点餐功能(点击种类,滚动到锚点)
Jun 11 #Javascript
多页vue应用的单页面打包方法(内含打包模式的应用)
Jun 11 #Javascript
VUE页面中通过双击实现复制表格中内容的示例代码
Jun 11 #Javascript
vue scroll滚动判断的实现(是否滚动到底部、滚动方向、滚动节流、获取滚动区域dom元素)
Jun 11 #Javascript
Vue初始化中的选项合并之initInternalComponent详解
Jun 11 #Javascript
Vue组件为什么data必须是一个函数
Jun 11 #Javascript
You might like
PHP获得用户使用的代理服务器ip即真实ip
2006/12/31 PHP
改变Apache端口等配置修改方法
2008/06/05 PHP
php去除重复字的实现代码
2011/09/16 PHP
谈谈php对接芝麻信用踩的坑
2016/12/01 PHP
php图片合成方法(多张图片合成一张)
2017/11/25 PHP
PHP的RSA加密解密方法以及开发接口使用
2018/02/11 PHP
利用JQuery为搜索栏增加tag提示
2009/06/22 Javascript
如何使用jQuery Draggable和Droppable实现拖拽功能
2013/07/05 Javascript
javascript获取web应用根目录的方法
2014/02/12 Javascript
js replace替换所有匹配的字符串
2014/02/13 Javascript
基于JavaScript Array数组方法(新手必看篇)
2016/08/20 Javascript
js以分隔符分隔数组中的元素并转换为字符串的方法
2016/11/16 Javascript
JS实现的模仿QQ头像资料卡显示与隐藏效果
2017/04/07 Javascript
利用javascript如何随机生成一定位数的密码
2017/09/22 Javascript
微信小程序移动拖拽视图-movable-view实例详解
2019/08/17 Javascript
Vue实现验证码功能
2019/12/03 Javascript
Node.js API详解之 querystring用法实例分析
2020/04/29 Javascript
js 函数性能比较方法
2020/08/24 Javascript
[01:42:49]DOTA2-DPC中国联赛 正赛 iG vs PSG.LGD BO3 第一场 2月26日
2021/03/11 DOTA
Python collections模块实例讲解
2014/04/07 Python
Django中对数据查询结果进行排序的方法
2015/07/17 Python
Python基本语法经典教程
2016/03/11 Python
python中如何正确使用正则表达式的详细模式(Verbose mode expression)
2017/11/08 Python
python抓取网页中链接的静态图片
2018/01/29 Python
pytorch实现MNIST手写体识别
2020/02/14 Python
python GUI库图形界面开发之PyQt5美化窗体与控件(异形窗体)实例
2020/02/25 Python
加拿大在线隐形眼镜专家:PerfectLens.ca
2016/11/19 全球购物
环境工程专业个人求职信
2013/12/05 职场文书
高中化学教学反思
2014/01/13 职场文书
日本语毕业生自荐信
2014/02/01 职场文书
乡镇干部个人对照检查材料思想汇报
2014/10/04 职场文书
2014年医院科室工作总结
2014/12/20 职场文书
中学生学习保证书
2015/02/26 职场文书
食品卫生管理制度
2015/08/06 职场文书
同学联谊会邀请函
2019/06/24 职场文书
数据分析数据库ClickHouse在大数据领域应用实践
2022/04/03 MySQL