小程序scroll-view组件不能触发相应滚动事件

在制作加载更多时会发现不能触发相应事件,一般情况下首先要查看两个必要的属性scroll-view的高度是否设置,第二就是scroll-view的滚动方向是否设置,缺一都有可能导致不能触发相应事件。
//wxml.  这里的高度可以用自适应高度
<scroll-view class='index-container' style="height:{{windowHeight}}" scroll-y bindscrolltolower="lower">
<view class='nav'>
<view class='nav-item' wx:for="{{navData}}" wx:for-index="id" wx:for-item="item" id="{{item.id}}" wx:key="id" bindtap="navClick">
<image class='contant_address_right' src="{{currentNavId==item.id?item.selectImage:item.image}}" class='nav-image' mode="aspectFit"></image>
<text class='{{currentNavId==item.id?"nav-item-text-actived":"nav-item-text"}}'>{{item.name}}</text>
</view>
</view>
<template is="{{currentTemplate}}" data="{{...goodsData}}"/>
<view class='loadmore' hidden="{{loadmore}}">
<text style='font-size: 28rpx;color: #2b2b2b;'>加载更多...</text>
</view>
</scroll-view>
   Page({
lower: function (e) {
if (this.data.loadmoreData){
this.setData({
loadmore: 'true',
})
this.loadmorenav();
}else{
this.setData({
loadmore: 'false',
})
}
},
onLoad: function (options) {
this.initfun();
var that = this;
wx.getSystemInfo({
success: function (res) {
that.setData({
windowHeight: res.windowHeight+"px",
})
}
})
}
})

小程序--->scroll-view组件不能触发相应滚动事件的更多相关文章

  1. 微信小程序 -- scroll view

    效果图:横向滚动和纵向滚动 scroll view使用方法文档,前面已经介绍查找文档方法,此处不再赘述 一.横向滚动 创建一个页面scroll-nav 然后,在.wxml文件中排版 <!--水平 ...

  2. 微信小程序中的组件使用1

    不管是vue还是react中,都在强调组件思想,同样,在微信小程序中也是使用组件思想来实现页面复用的,下面就简单介绍一下微信小程序中的组件思想. 组件定义与使用 要使用组件,首先需要有组件页面和使用组 ...

  3. 微信小程序之自定义组件的应用

    小程序支持自定义组件,下面是一个简单的购物车组件,实现的效果如图: 效果图 创建组件 在根目录创建components目录,然后创建计数组件 count 如图: 组件内容 <!--compone ...

  4. 微信小程序之swiper组件高度自适应

    微信小程序之swiper组件高度自适应 要求: (顶部广告栏 ) 改变swiper组件的固定高度,使之随内部每张图片的高度做自适应 原理: 图片加载完之后,获取图片的原始宽高,根据宽高比,计算出适应后 ...

  5. 小程序解决方案 Westore - 组件、纯组件、插件开发

    数据流转 先上一张图看清 Westore 怎么解决小程序数据难以管理和维护的问题: 非纯组件的话,可以直接省去 triggerEvent 的过程,直接修改 store.data 并且 update,形 ...

  6. 微信小程序自定义音频组件,自定义滚动条,单曲循环,循环播放

    小程序自定义音频组件,带滚动条 摘要:首先自定义音频组件,是因为产品有这样的需求,需要如下样式的 而微信小程序API给我们提供的就是这样的 而且产品需要小程序有后台播放功能,所以我们不考虑小程序的 a ...

  7. 微信小程序基于swiper组件的tab切换

    代码地址如下:http://www.demodashi.com/demo/14010.html 一.前期准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.co ...

  8. 「小程序JAVA实战」小程序的基础组件(24)

    转自:https://idig8.com/2018/08/12/xiaochengxu-chuji-24/ 来说下 ,小程序的基础组件.源码:https://github.com/limingios/ ...

  9. 微信小程序 | 51,live新课“小程序UI容器组件”的课堂计划

    零基础前端自学入门:小程序UI容器组件 这是一节以UI布局.容器组件的使用为主题的live,专注于布局与容器这一个点,努力把这一点讲透.这是继4月22日整体入门live“零基础周末学习小程序开发”之后 ...

随机推荐

  1. python 练习题2

    # 习题1:# 设定一个用户名和密码,用户输入正确的用户名和密码,# 则显示登录成功,否则提示登录失败,用户最多失败3次,# 否则退出程序.username="test"passw ...

  2. 0018 CSS注释(简单)

    CSS注释规则: /* 需要注释的内容 */ 进行注释的,即在需要注释的内容前使用 "/*" 标记开始注释,在内容的结尾使用 "*/"结束. 例如: p { / ...

  3. 从零开始のcocos2dx生活(五)ActionEase

    文章目录 sineEaseIn sineEaseOut sineEaseInOut expoEaseIn expoEaseOut expoEaseInOut easeIn easeOut easeIn ...

  4. jib-maven-plugin构建镜像

    序言 在本次期末设计当中,应为需要做部署脚本,我们采用的是dockerfile+docker-compose的部署方式,这种方式对vue项目是没有问题的,因为vue下载依赖与打包是分离开来的,即使修改 ...

  5. CSS3(4)---动画(animation)

    CSS3(4)---动画(animation) 之前有写过过渡:CSS3(2)--- 过渡(transition) 个人理解两者不同点在于 过渡 只能指定属性的 开始值 与 结束值,然后在这两个属性值 ...

  6. Word List 1 part 1

    inter- 在....之间 intermediate adj. 中间的 pro- 向前,在前;很多;赞同;亲... proportion n. 比例;部分 prim- 第一,主要的 prime ad ...

  7. CAP 3.0 版本发布通告

    前言 大家好,我们很高兴宣布 CAP 发布了 3.0 版本正式版. 自从上次 CAP 2.6 版本发布 以来,已经过去了几个月的时间,关注的朋友可能知道,在这几个月的时间里,也发布了几个预览版的 3. ...

  8. OBS Studio 完全开源免费录屏软件

    OBS是Open Broadcaster Software的简称,它是一款永久免费的直播软件.OBS直播软件相比XSplit,占用资源相对较少,对配置要求相对要低一点,相同点就是录制格式MP4,不用再 ...

  9. swiper如何禁止左右箭头切换

    swiper做项目时,需求 带着左右两边的箭头, 场景1:swiper自动切换,此时左右箭头点击时不能切换   场景2:swiper手动切换,左右箭头可以实现切换,通过翻阅api 终于找到 <s ...

  10. python 枚举类型

    在python中枚举是一种类(Enum,IntEnum),存放在enum模块中.枚举类型可以给一组标签赋予一组特定的值. 枚举的特点: 枚举类中不能存在相同的标签名 枚举是可迭代的 不同的枚举标签可以 ...