探秘小程序(8):scroll-view组件
按照官方文档的例子已经多scroll-view进行了说明,但是案例中没有样式 到时会出现一些问题,比如说,自己写的scroll-x并不能横向滚动,今天就来说一下这个问题:
DEMO如下:
html:
<view class='section'>
<view class='section_title'>verticle 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 scroll-x='true' class="scroll-view_H" style="width: 100%;">
<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>
js:
var order = ['red','yellow','blue','green','red']
Page({ /**
* 页面的初始数据
*/
data: {
toView:'red',
scrollTop:100
},
upper:function(e){
console.log('upper',e);
},
lower:function(e){
console.log('lower',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
})
}
})
css:
/* pages/scrollView/scrollView.wxss */
.bc_green{
background-color: green;
}
.bc_red{
background-color: red;
}
.bc_yellow{
background-color: yellow;
}
.bc_blue{
background-color: blue;
}
.scroll-view-item{
width: 300px;
height: 100px;
}
.scroll-view-item_H{
width: 50%;
height: 220rpx;
display: inline-block;
text-align: center;
margin: 0 auto;
}
.scroll-view_H{
width: 100%;
overflow: hidden;
white-space: nowrap;
height: 220rpx;
}
重点:
探秘小程序(8):scroll-view组件的更多相关文章
- 微信小程序开发—快速掌握组件及API的方法
微信小程序框架为开发者提供了一系列的组件和API接口. 组件主要完成小程序的视图部分,例如文字.图片显示.API主要完成逻辑功能,例如网络请求.数据存储.音视频播放控制,以及微信开放的微信登录.微信支 ...
- 微信小程序开发—快速掌握组件及API的方法---转载
微信小程序框架为开发者提供了一系列的组件和API接口. 组件主要完成小程序的视图部分,例如文字.图片显示.API主要完成逻辑功能,例如网络请求.数据存储.音视频播放控制,以及微信开放的微信登录.微信支 ...
- 小程序 模态对话框自定义组件(modal)
1. 概述 1.1 说明 小程序中使用wx.showModal(Object object)打开一个模态对话框,但是目前小程序所提供的modal中的内容显示比较死板,不能够完全满足工作中所遇到的功能信 ...
- 微信小程序(3)——常用的组件
view: view是小程序中的视图容器之一,似于html中的<div>标签 <view class="section"> <view class=& ...
- 小程序开发-Map地图组件
Map组件 是原生组件,使用时请注意相关限制.个性化地图能力可在小程序后台"设置-开发者工具-腾讯位置服务"申请开通. 设置subkey后,小程序内的地图组件均会使用该底图效果,底 ...
- 微信小程序中的自定义组件
微信小程序中的组件 前言 之前做小程序开发的时候,对于开发来说比较头疼的莫过于自定义组件了,当时官方对这方面的文档也只是寥寥几句,一笔带过而已,所以写起来真的是非常非常痛苦!! 好在微信小程序的库从 ...
- [小程序开发] 微信小程序audio音频播放组件+api_wx.createAudioContext
引言: audio是微信小程序中的音频组件,可以轻松实现小程序中播放/停止音频等自定义动作. 附上微信小程序audio组件的相关属性说明:https://mp.weixin.qq.com/debug/ ...
- wepy-cli 开发小程序如何使用vant组件
同样使用wepy-cli快速生成的小程序,目前可以使用组件: 直接通过 git 下载 Vant Weapp 源代码,并将dist目录拷贝到自己的项目中 git clone https://github ...
- 百度小程序自定义通用toast组件
百度小程序Toast组件 author: @TiffanysBear 百度小程序自定义通用toast组件 BdToast百度小程序自定义通用组件-github地址 需求 手百小程序的toast仅支持在 ...
- 微信小程序页面调用自定义组件内的事件
微信小程序页面调用自定义组件内的事件 page page.json { "usingComponents": { "my-component": ". ...
随机推荐
- Vue入门---常用指令详解
Vue入门 Vue是一个MVVM(Model / View / ViewModel)的前端框架,相对于Angular来说简单.易学上手快,近两年也也别流行,发展速度较快,已经超越Angular了.比较 ...
- C# 最齐全的上传图片方法
方法里包括了图片大小限制.图片尺寸.文件内容等等的判断... 该案例是mvc下的demo,支持单张图片上传. public ActionResult Upload() { string imgurl ...
- 参数签名ascii码排序的坑
参数签名中通常是按键值对中键名称的ASCII按从小到大的顺序排序后进行hash为签名字符串.不要直接使用 SortedDictionary<string, string> 有坑的,他是按数 ...
- string Type
Notes from C++ Primer Operations Operations of string support lots of operations of sequential conta ...
- C++中const关键字 理解
const:符号常量 使用符号常量写出的代码更容易维护:指针是边读边移动,而不是边写边移动,许多函数参数是只读不写的. const最常见用途是作为数组的界和switch分情况标号(也可以用枚举符代替 ...
- maya2015卸载/安装失败/如何彻底卸载清除干净maya2015注册表和文件的方法
maya2015提示安装未完成,某些产品无法安装该怎样解决呢?一些朋友在win7或者win10系统下安装maya2015失败提示maya2015安装未完成,某些产品无法安装,也有时候想重新安装maya ...
- Web开发经验谈之F12开发者工具/Web调试[利刃篇]
引语:如今的整个Web开发行业甚至说整个软件开发行业,已经相当成熟,基本上已经很少找不到没有前人做过的东西了,或者换句话说,你想要实现的功能,你总能在某个地方搜索到答案,关键是你有没有这个时间精力去搜 ...
- Java-大数据方向学习和已掌握知识点整理
现在的项目是大数据相关项目,一路走来从最初的 C 开发到 Java 再到 大数据,不容易 大数据方向知识点太多,优先掌握了主流的一些技术并运用到了现在的项目中 另外也整理了一份java开发和项目管理方 ...
- Ubuntu 18.0.4安装Mongodb
2.21更新: 安装后本地通过robo 3T连接正常,但是其它机器通过IP连接时报错,继续查找,解决方案在这里(传送门),原因是mongodb安装完成后默认监听本地地址,也就是127.0.0.1,这样 ...
- Hadoop生态系统之Yarn
Apache YARN(Yet Another Resource Negotiator) 是Hadoop的集群资源管理系统.YARN被引入Hadoop2最初是为了改善MapReduce的实现,但它具有 ...