微信小程序 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 相关文章推荐
JS动画效果代码3
Apr 03 Javascript
jquery实现带复选框的表格行选中删除时高亮显示
Aug 01 Javascript
jquery带有索引按钮且自动轮播切换特效代码分享
Sep 15 Javascript
JavaScript基础重点(必看)
Jul 09 Javascript
js绘制购物车抛物线动画
Nov 18 Javascript
Bootstrap基本组件学习笔记之列表组(11)
Dec 07 Javascript
详解angularjs中的隔离作用域理解以及绑定策略
May 31 Javascript
浅谈angular4 ng-content 中隐藏的内容
Aug 18 Javascript
使用Vue完成一个简单的todolist的方法
Dec 01 Javascript
p5.js入门教程之鼠标交互的示例
Mar 16 Javascript
在Web关闭页面时发送Ajax请求的实现方法
Mar 07 Javascript
vue3语法糖内的defineProps及defineEmits
Apr 14 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
推荐十款免费 WordPress 插件
2015/03/24 PHP
Zend Framework实现将session存储在memcache中的方法
2016/03/22 PHP
使用JavaScript创建新样式表和新样式规则
2016/06/14 PHP
Node.js 的异步 IO 性能探讨
2014/10/08 Javascript
jQuery 动态云标签插件
2014/11/11 Javascript
JavaScript中判断函数、变量是否存在
2015/06/10 Javascript
javascript中使用正则表达式清理table样式的代码
2020/04/01 Javascript
text-align:justify实现文本两端对齐 兼容IE
2015/08/19 Javascript
AngularJS入门教程之AngularJS表达式
2016/04/18 Javascript
js插件实现图片滑动验证码
2020/09/29 Javascript
利用CDN加速react webpack打包后的文件详解
2018/02/22 Javascript
使用axios发送post请求,将JSON数据改为form类型的示例
2019/10/31 Javascript
elementui更改el-dialog关闭按钮的图标d的示例代码
2020/08/04 Javascript
vue使用svg文件补充-svg放大缩小操作(使用d3.js)
2020/09/22 Javascript
[03:23]我的刀塔你不可能这么可爱 第一期金萌萌的故事
2014/06/20 DOTA
Python微信企业号开发之回调模式接收微信端客户端发送消息及被动返回消息示例
2017/08/21 Python
Python 使用type来定义类的实现
2019/11/19 Python
通过实例解析python and和or使用方法
2020/11/14 Python
美国卡车、吉普车和SUV零件网站:4 Wheel Parts
2016/11/24 全球购物
Myprotein加拿大官网:欧洲第一的运动营养品牌
2018/01/06 全球购物
全球第二大家装零售商:Lowe’s
2018/01/13 全球购物
帕克纽约:PARKER NY
2018/12/09 全球购物
opencv实现图像几何变换
2021/03/24 Python
20岁生日感言
2014/01/13 职场文书
四年级数学教学反思
2014/02/02 职场文书
商学院大学生求职的自我评价
2014/03/12 职场文书
公司担保书格式范文
2014/05/12 职场文书
奥巴马胜选演讲稿
2014/05/15 职场文书
物业公司的岗位任命书
2014/06/06 职场文书
学生检讨书如何写
2014/10/30 职场文书
环卫工人慰问信
2015/02/15 职场文书
美丽心灵观后感
2015/06/01 职场文书
辛亥革命观后感
2015/06/02 职场文书
谢师宴学生致辞
2015/07/27 职场文书
遇事可以测出您的见识与格局
2019/09/16 职场文书
浅谈JavaScript浅拷贝和深拷贝
2021/11/07 Javascript