微信小程序-scroll-view组件
<view class="section">
<view class="section__title">vertical scroll</view>
<scroll-view scroll-y style="height: 200px;" bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" scroll-into-view="{{toView}}" scroll-top="{{scrollTop}}">
<view id="green" class="scroll-view-item bc_green"></view>
<view id="red" class="scroll-view-item bc_red"></view>
<view id="yellow" class="scroll-view-item bc_yellow"></view>
<view id="blue" class="scroll-view-item bc_blue"></view>
</scroll-view> <view class="btn-area">
<button size="mini" bindtap="tap">click me to scroll into view </button>
<button size="mini" bindtap="tapMove">click me to scroll</button>
</view>
</view>
<view class="section section_gap">
<view class="section__title">horizontal scroll</view>
<scroll-view class="scroll-view_H" scroll-x style="">
<view id="green" class="scroll-view-item_H bc_green"></view>
<view id="red" class="scroll-view-item_H bc_red"></view>
<view id="yellow" class="scroll-view-item_H bc_yellow"></view>
<view id="blue" class="scroll-view-item_H bc_blue"></view>
</scroll-view>
</view>
index.wxml
.scroll-view-item{width:100%; height: 100px;} .scroll-view_H{line-height: 100px;height: 100px;width: 100%;white-space:nowrap;}
.scroll-view-item_H{width:50%; height: 100px;display: inline-block;} .bc_green {background: green;}
.bc_red {background: red;}
.bc_blue {background: blue;}
.bc_yellow{background: yellow;}
indexwxss
var order = ['red', 'yellow', 'blue', 'green', 'red']
Page({
data: {
toView: 'red',
scrollTop: 100
},
upper: function (e) {
console.log(e)
},
lower: function (e) {
console.log(e)
},
scroll: function (e) {
console.log(e)
},
tap: function (e) {
for (var i = 0; i < order.length; ++i) {
if (order[i] === this.data.toView) {
this.setData({
toView: order[i + 1]
})
break
}
}
},
tapMove: function (e) {
this.setData({
scrollTop: this.data.scrollTop + 10
})
}
})
index.js
{
"pages":[
"index/index"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle":"black"
}
}
app.json
{
"description": "项目配置文件。",
"packOptions": {
"ignore": []
},
"setting": {
"urlCheck": true,
"es6": true,
"postcss": true,
"minified": true,
"newFeature": true
},
"compileType": "miniprogram",
"libVersion": "1.9.98",
"appid": "wxc32558e56ff41f5d",
"projectname": "scroll-view%E7%BB%84%E4%BB%B6",
"isGameTourist": false,
"condition": {
"search": {
"current": -1,
"list": []
},
"conversation": {
"current": -1,
"list": []
},
"game": {
"currentL": -1,
"list": []
},
"miniprogram": {
"current": -1,
"list": []
}
}
}
project.config.json
微信小程序-scroll-view组件的更多相关文章
- 微信小程序 -- scroll view
效果图:横向滚动和纵向滚动 scroll view使用方法文档,前面已经介绍查找文档方法,此处不再赘述 一.横向滚动 创建一个页面scroll-nav 然后,在.wxml文件中排版 <!--水平 ...
- 微信小程序之swiper组件高度自适应
微信小程序之swiper组件高度自适应 要求: (顶部广告栏 ) 改变swiper组件的固定高度,使之随内部每张图片的高度做自适应 原理: 图片加载完之后,获取图片的原始宽高,根据宽高比,计算出适应后 ...
- 微信小程序中的组件使用1
不管是vue还是react中,都在强调组件思想,同样,在微信小程序中也是使用组件思想来实现页面复用的,下面就简单介绍一下微信小程序中的组件思想. 组件定义与使用 要使用组件,首先需要有组件页面和使用组 ...
- 微信小程序基于swiper组件的tab切换
代码地址如下:http://www.demodashi.com/demo/14010.html 一.前期准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.co ...
- 关于微信小程序前端Canvas组件教程
关于微信小程序前端Canvas组件教程 微信小程序Canvas接口函数 上述为微信小程序Canvas的内部接口,通过熟练使用Canvas,即可画出较为美观的前端页面.下面是使用微信小程序画图的一些 ...
- 微信小程序校历组件
微信小程序校历组件 校历组件,可以作为校园小程序的插件,如果觉得不错,点个star吧
- 原创:WeZRender:微信小程序Canvas增强组件
WeZRender是一个微信小程序Canvas增强组件,基于HTML5 Canvas类库ZRender. 使用 WXML: <canvas style="width: 375px; h ...
- uni-app开发微信小程序引入UI组件库(Vant-weapp)步骤
uni-app开发微信小程序引入UI组件库(Vant-weapp)步骤 这里以vant-weapp为例 uni-app官方文档介绍引入组件的方法 1. 新建相关目录 根目录下创建 wxcomponen ...
- 微信小程序内置组件web-view的缓存问题探讨
前言:博客或者论坛上面,还有自习亲身经历,发现微信小程序的webview组件的页面缓存问题相当严重,对开发H5的小童鞋来说应该困扰了不少.很多小童鞋硬是抓破脑袋也没有办法解决这个问题,那我们今天就来探 ...
- 微信小程序--页面与组件之间如何进行信息传递和函数调用
微信小程序--页面与组件之间如何进行信息传递和函数调用 这篇文章我会以我自己开发经验从如下几个角度来讲解相关的内容 页面如何向组件传数据 组件如何向页面传数据 页面如何调用组件内的函数 组件如何调 ...
随机推荐
- fd与FILE结构体
文件描述符 fd 概念:文件描述符在形式上是一个非负整数.实际上,它是一个索引值,指向内核为每一个进程所维护的该进程打开文件的记录表.当程序打开一个现有文件或者创建一个新文件时,内核向进程返回一个文件 ...
- 持续集成篇:jenkins搭建和job运行
好久没有更博了,最近都在忙着其他事情,年底前加上这章再更5篇,10月份开始因为公司业务,要接触appium啦,之后应该也会有所分享. Jenkins所需环境 硬件需求: ①至少需要有256M内存,推 ...
- 进阶篇:4.3)DFA设计指南:宽松公差及人性装配及其他
本章目的:设计需要为装配考虑,给他们提供各种优待,装配才能做出好产品. 1.前言 机械贴合现实而软件远离现实. 越是学习机械设计的原则,越是感觉他们和一些做人做事的道理相同的. 如,机械设计原则都是有 ...
- 【算法笔记】A1039 Course List for Student
https://pintia.cn/problem-sets/994805342720868352/problems/994805447855292416 题意: 有N个学生,K节课.给出选择每门课的 ...
- [性能测试]:关于MQ协议脚本开发
消息队列(MQ)是一种应用程序对应用程序的通信方法.应用程序通过写和检索出入列队的针对应用程序的数据(消息)来通信,而无需专用连接来链接它们. 银行脚本使用MQ通信的较多,下面介绍一个MQ的脚本: M ...
- 我3年前开发的IM即时通讯一直没勇气推出,现在智能时代了,有什么可以结合的地方吗?
我3年前开发的IM即时通讯一直没勇气推出,现在智能时代了,有什么可以结合的地方吗? 服务端采用基于XMPP协议的Openfire(当然改造了很多,也添加了很多握手协议) 客户端有做了四个版本:一个Ja ...
- (转)Mysql主从复制搭建及详解
http://www.cnblogs.com/kevingrace/p/6256603.html---------Mysql主从同步(1)-主从/主主环境部署梳理 原文:http://blog.csd ...
- Git的介绍和使用
Git是目前世界上最先进的分布式版本控制系统 Git的安装 1.在linux上安装 你可以先输入git,看看系统是不是已经自带了git 或者 sudo apt-get install git 就可以 ...
- js关闭当前页面
<a href="javascript:window.opener=null;window.open('','_self');window.close();">关闭&l ...
- unity编辑器教程
https://blog.csdn.net/candycat1992/article/details/52067975