微信小程序 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 相关文章推荐
ExtJS TabPanel beforeremove beforeclose使用说明
Mar 31 Javascript
javascript 闭包疑问
Dec 30 Javascript
JS获取html对象的几种方式介绍
Dec 05 Javascript
jQuery实现dialog设置focus焦点的方法
Jun 10 Javascript
jquery ajax 如何向jsp提交表单数据
Aug 23 Javascript
浅谈javascript中new操作符的原理
Jun 07 Javascript
jQuery中ScrollTo用法示例
Sep 04 Javascript
javascript 中的继承实例详解
May 05 Javascript
vue 计时器组件的实现代码
Sep 14 Javascript
详解在Vue中有条件地使用CSS类
Sep 30 Javascript
bootstrap table列和表头对不齐的解决方法
Jul 19 Javascript
JavaScript实现抖音罗盘时钟
Oct 11 Javascript
基于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 危险函数解释 分析
2009/04/22 PHP
php找出指定范围内回文数且平方根也是回文数的方法
2015/03/23 PHP
PHP实现阿里大鱼短信验证的实例代码
2017/07/10 PHP
TP5框架实现的数据库备份功能示例
2020/04/05 PHP
In Javascript Class, how to call the prototype method.(three method)
2007/01/09 Javascript
jquery text()要注意啦
2009/10/30 Javascript
jQuery ajax cache缓存问题
2010/07/01 Javascript
jquery.simple.tree插件 更简单,兼容性更好的无限树插件
2010/09/03 Javascript
JavaScript中的闭包介绍
2015/03/15 Javascript
JavaScript入门基础
2015/08/12 Javascript
Three.js基础学习之场景对象
2017/09/27 Javascript
详解使用jQuery.i18n.properties实现js国际化
2018/05/04 jQuery
vue better scroll 无法滚动的解决方法
2018/06/07 Javascript
angular2组件中定时刷新并清除定时器的实例讲解
2018/08/31 Javascript
validform表单验证的实现方法
2019/03/08 Javascript
vue实现行列转换的一种方法
2019/08/06 Javascript
使用webpack将ES6转化ES5的实现方法
2019/10/13 Javascript
Python中的面向对象编程详解(下)
2015/04/13 Python
python删除指定类型(或非指定)的文件实例详解
2015/07/06 Python
详解Python读取配置文件模块ConfigParser
2017/05/11 Python
python变量命名的7条建议
2019/07/04 Python
pycharm配置当鼠标悬停时快速提示方法参数
2019/07/31 Python
使用python批量修改文件名的方法(视频合并时)
2020/03/24 Python
Python+OpenCV实现图像的全景拼接
2020/03/05 Python
Django REST Swagger实现指定api参数
2020/07/07 Python
详解H5本地储存Web Storage
2017/07/03 HTML / CSS
html2canvas生成清晰的图片实现打印的示例代码
2019/09/30 HTML / CSS
Argos官网:英国家喻户晓的百货零售连锁商
2017/04/03 全球购物
程序员机试试题汇总
2012/03/07 面试题
介绍一下JMS编程步骤
2015/09/22 面试题
危爆物品安全大检查大整治工作方案
2014/05/03 职场文书
法律专业大学生职业生涯规划书:向目标一步步迈进
2014/09/22 职场文书
党风廉正建设责任书
2015/01/29 职场文书
终止合同协议书范本
2016/03/22 职场文书
Mysql基础知识点汇总
2021/05/26 MySQL
python基础之类方法和静态方法
2021/10/24 Python