微信小程序 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 相关文章推荐
Eclipse去除js(JavaScript)验证错误
Feb 11 Javascript
Node.js插件安装图文教程
May 06 Javascript
详解PHP中pathinfo()函数导致的安全问题
Jan 05 Javascript
纯js模仿windows系统日历
Feb 04 Javascript
JS实现匀加速与匀减速运动的方法示例
Sep 04 Javascript
基于webpack 实用配置方法总结
Sep 28 Javascript
prototype.js简单实现ajax功能示例
Oct 18 Javascript
Vue中使用的EventBus有生命周期
Jul 12 Javascript
跨域请求两种方法 jsonp和cors的实现
Nov 11 Javascript
超好用的jQuery分页插件jpaginate用法示例【附源码下载】
Dec 06 jQuery
webpack-mvc 传统多页面组件化开发详解
May 07 Javascript
vue中watch和computed的区别与使用方法
Aug 23 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的一些小问题
2010/07/03 PHP
php 伪造本地文件包含漏洞的代码
2011/11/03 PHP
thinkPHP多表查询及分页功能实现方法示例
2017/07/03 PHP
PHP开发之归档格式phar文件概念与用法详解【创建,使用,解包还原提取】
2017/11/17 PHP
Laravel 微信小程序后端搭建步骤详解
2019/11/26 PHP
JavaScript将相对地址转换为绝对地址示例代码
2013/07/19 Javascript
JavaScript中的迭代器和生成器详解
2014/10/29 Javascript
仿JQuery输写高效JSLite代码的一些技巧
2015/01/13 Javascript
在Node.js应用中读写Redis数据库的简单方法
2015/06/30 Javascript
认识Knockout及如何使用Knockout绑定上下文
2015/12/25 Javascript
基于javascript实现listbox左右移动
2016/01/29 Javascript
一个仿微博登陆邮箱提示框js开发案例
2016/07/28 Javascript
javascript实现简单的on事件绑定
2016/08/23 Javascript
w3c编程挑战_初级脚本算法实战篇
2017/06/23 Javascript
JS实现可针对算术表达式求值的计算器功能示例
2018/09/04 Javascript
PWA介绍及快速上手搭建一个PWA应用的方法
2019/01/27 Javascript
vue elementUI 表单校验功能之数组多层嵌套
2019/06/04 Javascript
Vue中Table组件行内右键菜单实现方法(基于 vue + AntDesign)
2019/11/21 Javascript
jQuery使用jsonp实现百度搜索的示例代码
2020/07/08 jQuery
vue:el-input输入时限制输入的类型操作
2020/08/05 Javascript
JavaScript实现轮播图效果
2020/10/30 Javascript
python解析模块(ConfigParser)使用方法
2013/12/10 Python
Python cookbook(字符串与文本)针对任意多的分隔符拆分字符串操作示例
2018/04/19 Python
Django中如何使用sass的方法步骤
2019/07/09 Python
python 有效的括号的实现代码示例
2019/11/11 Python
Mio Skincare英国官网:身体紧致及孕期身体护理
2018/08/19 全球购物
俄罗斯品牌服装在线商店:VIPAVENUE
2020/08/10 全球购物
物流司机岗位职责
2013/12/28 职场文书
大学毕业生自荐书怎么写?
2014/01/06 职场文书
教师评优事迹材料
2014/01/10 职场文书
工商治理实习生的自我评价
2014/01/15 职场文书
研究生毕业自我鉴定范文
2014/03/27 职场文书
大型营销活动计划书
2014/04/28 职场文书
体育活动总结
2015/02/04 职场文书
田径运动会通讯稿
2015/07/18 职场文书
公司中层管理培训心得体会
2016/01/11 职场文书