小程序--->scroll-view组件不能触发相应滚动事件
小程序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组件不能触发相应滚动事件的更多相关文章
- 微信小程序 -- scroll view
效果图:横向滚动和纵向滚动 scroll view使用方法文档,前面已经介绍查找文档方法,此处不再赘述 一.横向滚动 创建一个页面scroll-nav 然后,在.wxml文件中排版 <!--水平 ...
- 微信小程序中的组件使用1
不管是vue还是react中,都在强调组件思想,同样,在微信小程序中也是使用组件思想来实现页面复用的,下面就简单介绍一下微信小程序中的组件思想. 组件定义与使用 要使用组件,首先需要有组件页面和使用组 ...
- 微信小程序之自定义组件的应用
小程序支持自定义组件,下面是一个简单的购物车组件,实现的效果如图: 效果图 创建组件 在根目录创建components目录,然后创建计数组件 count 如图: 组件内容 <!--compone ...
- 微信小程序之swiper组件高度自适应
微信小程序之swiper组件高度自适应 要求: (顶部广告栏 ) 改变swiper组件的固定高度,使之随内部每张图片的高度做自适应 原理: 图片加载完之后,获取图片的原始宽高,根据宽高比,计算出适应后 ...
- 小程序解决方案 Westore - 组件、纯组件、插件开发
数据流转 先上一张图看清 Westore 怎么解决小程序数据难以管理和维护的问题: 非纯组件的话,可以直接省去 triggerEvent 的过程,直接修改 store.data 并且 update,形 ...
- 微信小程序自定义音频组件,自定义滚动条,单曲循环,循环播放
小程序自定义音频组件,带滚动条 摘要:首先自定义音频组件,是因为产品有这样的需求,需要如下样式的 而微信小程序API给我们提供的就是这样的 而且产品需要小程序有后台播放功能,所以我们不考虑小程序的 a ...
- 微信小程序基于swiper组件的tab切换
代码地址如下:http://www.demodashi.com/demo/14010.html 一.前期准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.co ...
- 「小程序JAVA实战」小程序的基础组件(24)
转自:https://idig8.com/2018/08/12/xiaochengxu-chuji-24/ 来说下 ,小程序的基础组件.源码:https://github.com/limingios/ ...
- 微信小程序 | 51,live新课“小程序UI容器组件”的课堂计划
零基础前端自学入门:小程序UI容器组件 这是一节以UI布局.容器组件的使用为主题的live,专注于布局与容器这一个点,努力把这一点讲透.这是继4月22日整体入门live“零基础周末学习小程序开发”之后 ...
随机推荐
- Visioi形状相关应用
选择手柄为白点 按住shift的同时移动白点更为灵活 黄色的点就是控制手柄(只有一维图形有) 当调整形状出现绿色边的时候说明:这个时候这个形状的边等于了某个形状的长 铅笔工具可以移动控制点来更形状 ...
- EasyMock.replay()有什么用
现在很多项目都使用EasyMock来作为单元测试框架. EasyMock一个方法,基本上是三步:EasyMock.expect().EasyMock.replay().EasyMock.verify( ...
- k8s集群———etcd-三节点部署
etcd集群部署 ,创建etcd可执行文件,配置文件,证书文件存放目录 mkdir /opt/etcd/{bin,cfg,ssl} -p ,创建包文件存放目录 mkdir /soft -p ,解压et ...
- ELK部署检测nginx日志demo
ELK E: ElasticSearch 搜索引擎 存储 https://www.elastic.co/cn/downloads/elasticsearch L: Logstash 日志收集 http ...
- Java容器知识总结
剖析面试最常见问题之Java集合框架 说说List,Set,Map三者的区别? List(对付顺序的好帮手): List接口存储一组不唯一(可以有多个元素引用相同的对象),有序的对象 Set(注重独一 ...
- (一)Django项目架构介绍
项目的架构为: 1.虚拟环境virtualenv 安装Django==2.1.3 安装pymysql 安装mysqlclient 安装其他等 2.项目结构为: 应用APP: blog -- 管理博客 ...
- 高德API对接
<?php class GaoDeAPI { private $key = '123456789'; # 你应用key /** * 地址转经纬度 */ public function getTr ...
- 大量SQL的解决方案——sdmap
大量SQL的解决方案--sdmap 最近看到群里面经常讨论大型应用中SQL的管理办法,有人说用EF/EF Core,但很多人不信任它生成SQL的语句:有人说用Dapper,但将SQL写到代码中有些人觉 ...
- 全流程开发 TP6.0实战高并发电商服务系统*完
在TP6框架中我们可以学到TP整体知识,如下图一所示: 图一:TP6整体知识点 这些内容都会在实战课程中一一涵盖,并且在课程中我们会用到五层架构思想(如图二),和传统的MVC架构有所不一样,这样做可以 ...
- 关于java php go 中AES加解密秘钥长度问题
今天心血来朝,想用go把php中的一个小功能重写一下,但在解密aes加密的数据时碰到了个坑! php的mcrypt拓展(貌似php7.1版本以上不支持了)提供了aes的加解密: 而且php aes 的 ...