1   scrollview

窗口view的滑动

<scroll-view scroll-y class='scroll-view-y' bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" scroll-top="{{scrolltop}}">
<view id="gree" 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>
<button type='primary' bindtap='tapMove'>滚动</button>

2  swiper  滑块视图容器,通过手指对屏幕的滑动达到切换容器内容的效果

<swiper indicator-dots='{{indicatorDots}}' autoplay='{{autoplay}}' interval='{{interval}}' duration='{{duration}}'>
<block wx:for="{{imgUrls}}">       这是一个循环体,imgUrls
<swiper-item>
<image src="{{item}}" class="slide-image"></image>       不断循环item将地址显示出来
</swiper-item>
</block>
</swiper>
const app = getApp()
Page({
/**
* 页面的初始数据
*/
data: {
indicatorDots:true,
autoplay:true,
interval:5000,
duration:1000,
imgUrls: ['../../../images/tooopen_sy_143912755726.jpg', '../../../images/tooopen_sy_143912755726.jpg', '../../../images/tooopen_sy_143912755726.jpg']
},
changeIndicatorDots:function(e){
this.setData({
indicatorDots:!this.data.indicatorDots
})
},
changeAutoplay:function(e){
this.setData({
autoplay:!this.data.autoplay
})
},
intervalChange:function(e){
this.setData({
interval:e.detail.value
})
},
durationChange:function(e){
this.setData({
duration:e.detail.value
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
 
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
 
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
 
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
 
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
 
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
 
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
 
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
 
}
})
 
按照以上代码之后,但是图片不显示。好吧,又一个坑,原来是app.wxss中有一句

align-items: center;  把这句删了,图片就显示出来了。原因是什么呢?继续度娘
w3cschool中有一句话
The align-items property vertically aligns the flexible container's items when the items do not use all available space on the cross-axis.
根本原因是从句的内容,当子元素不需要使用交叉轴的所有空间时,才应该设置这个属性。
该属性默认的是stretch ,填充交叉轴的全部长度。如果设置其他属性,例如center,就需要显式地指定元素在交叉轴方向上的大小,或者有内容,否则元素就不会显示。  相关链接地址      https://www.jianshu.com/p/1ef7decf9816

ICON组件

iconType: ['sucess', 'info', 'warn', 'waiting', 'safe_suceess', 'safe_warn', 'sucess_circle', 'success_no_circle', 'waiting_circle', 'circle', 'download', 'infoi_circle', 'cancel', 'search', 'clear']
 
text组件  文本显示组件
 
progress 组件 进度条组件
<progress percent='90' show-info color='red' active></progress>

form 表单组件

最后一个就是button组件。

<button type='primary' form-type='submit'>submit</button> 提交
<button type='primary' form-type='reset'>Reset</button> 重置
form表单中写入

<form bindsubmit='formSubmit' bindreset='formReset'>  提交函数和重置函数,就能够获得表单中的值。表单中的组件需要添加name字段属性,这样就能根据属性获得对应属性的值了。表单基本上就ok了。比较简单,我感觉

微信小程序控件的更多相关文章

  1. 微信小程序控件 横/纵向排列

    控件(按钮)横向排列 wxss .view_class { display: flex; flex-direction: row; justify-content: center; } 控件(按钮)纵 ...

  2. 微信小程序-wepy-组件模板重复渲染

    微信小程序开发,有使用wepy框架的需求.上手: 安装自己可以到官网查看,飞机票:https://tencent.github.io/wepy/document.html#/ 具体开发模式和Vue开发 ...

  3. 微信小程序--图片相关问题合辑

    图片上传相关文章 微信小程序多张图片上传功能 微信小程序开发(二)图片上传 微信小程序上传一或多张图片 微信小程序实现选择图片九宫格带预览 ETL:微信小程序之图片上传 微信小程序wx.preview ...

  4. 史诗手册!微信小程序新手自学入门宝典!

    一.小程序官方指南 1:官方开发工具下载: https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=201714 0.12 ...

  5. 微信小程序基础之新建的项目文件图解

    昨天发布的文章,感觉对于学习不够直观,所以今天重点在图标上进行了详细的对应介绍,稍后会尝试开发小程序控件的使用.转载请标注出处,谢谢!

  6. 微信小程序基础之input输入框控件

    今天主要详写一下微信小程序中的Input输入框控件,输入框在程序中是最常见的,登录,注册,获取搜索框中的内容等等都需要,同时,还需要设置不同样式的输入框,今天的代码中都要相应的使用. input输入框 ...

  7. 微信小程序基础之试图控件View、ScrollView、Swiper

    今天写一篇关于微信小程序视图控件的文章,主要是介绍界面的搭建和部分操作js交互功能的介绍,转载请注明出处,谢谢~ 首先显示首页结构.创建三个navigator,用来跳转页面: <!--index ...

  8. 微信小程序地图控件篇 ---自定义图标被地图覆盖的问题

    今天在做微信小程序的时候遇到这个这样的问题  需要在地图上加个一个自定义的图标控件 类似这样的 刚开始的时候怎图片一直会被地图组件覆盖  ,要怎么解决这个问题  我去翻了下小程序的文档 有个cover ...

  9. 微信小程序实现显示和隐藏控件-头像-取值-bindblur事件

    微信小程序实现显示和隐藏控件 .wxml: <view class=" {{showOrHidden?'show':'hidden'}}"></view> ...

随机推荐

  1. 纯Delphi 原生写的 上传到七牛的功能

    上传文件到七牛, 支持分片分段上传, 适用于Delphi XE, 10等新版本 分两个函数: uploadToQiniu 和 directUploadToQiniu uploadToQiniu 这个函 ...

  2. 1005 -- I Think I Need a Houseboat

    I Think I Need a Houseboat Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 105186   Acc ...

  3. Oracle备份统计信息

    Oracle可以通过DBMS_STATS.GET_TABLE_STATS 收集表的统计信息,一般的收集方法如下: DBMS_STATS.GATHER_TABLE_STATS(OWNNAME => ...

  4. JS对象 屏幕分辨率的高和宽 window.screen 对象包含有关用户屏幕的信息。 1. screen.height 返回屏幕分辨率的高 2. screen.width 返回屏幕分辨率的宽

    屏幕分辨率的高和宽 window.screen 对象包含有关用户屏幕的信息. 1. screen.height 返回屏幕分辨率的高 2. screen.width 返回屏幕分辨率的宽 注意: 1.单位 ...

  5. 关于PCB的Mark点

    关于PCB的Mark PCB板子做好后,需要贴装元器件,现在元器件的贴装都是通过机器来完成的(SMT).SMT中会用到mark点. 一.什么是Mark点 Mark点也叫基准点或者光学定位点,为贴装工艺 ...

  6. 界面设计微信小程序

    上一个周期将微信小程序的程序编完了,虽然还有很多需要修改的地方,大体已经完成.剩下的边角料以后再弄 这个周期来学习一下微信小程序的设计....好吧. 首先还是需要看一下微信的设计指南的.地址 http ...

  7. 基于React Native的跨三端应用架构实践

    作者|陈子涵 编辑|覃云 “一次编写, 到处运行”(Write once, run anywhere ) 是很多前端团队孜孜以求的目标.实现这个目标,不但能以最快的速度,将应用推广到各个渠道,而且还能 ...

  8. vue 学习六 在组件上使用v-model

    其实这个部分应该是属于component,为什么把这玩意单独拿出来呢,原因是它这个东西比较涉及到了vue的事件,以及v-model指令的使用,还是比较综合的.所以就拿出来啦 父组件 <templ ...

  9. loj2471[九省联考2018]一双木棋

    题意:在一个n*m的棋盘上,A和B轮流放置棋子.一个位置能够放置棋子当且仅当它上面没有棋子并且它的上面和左边一格都已经放了棋子(不难发现是一个上三角阶梯状).每个格子有两个权值,当A在上面放置棋子时A ...

  10. Android中的ListView的绘制过程中执行的方法

    首先,系统在绘制ListView之前, 将会先调用getCount方法来获取Item的个数.(如果getCount方法返回0的话,列表时不显示任何内容的) 之后每绘制一个 Item就会调用一次getV ...