微信小程序入门基本知识
<swiper></swiper>---滑块视图容器。
indicator-dots->是否显示面板指示点->Boolean;
indicator-color->指示点颜色->Color;
indicator-active-color->当前选中的指示点颜色->Color;
autoplay->是否自动切换->Boolean;
current->当前所在页面的 index->Number;
interval->自动切换时间间隔->Number;
duration->滑动动画时长->Number;
circular->是否采用衔接滑动->Boolean;
注意:以上只可放置<swiper>组件,否则会导致未定义的行为。
swiper-item仅可放置在<swiper></swiper>组件中,宽高自动设置为100%。
index.wxml如下:
<!--index.wxml--> <swiper class="swiper" indicator-dots="true" autoplay="true" interval="5000" duration="1000"> <block wx:for="{{movies}}" wx:for-index="index"> <swiper-item> <image src="{{item.url}}" class="slide-image" mode="aspectFill"/> </swiper-item> </block> </swiper>
微信小程序开发的循环用到了<block wx:for >
我这里是遍历movies[]数组.<swiper-item>就是item
index.js如下:
//index.js //获取应用实例 var app = getApp() Page({ data: { movies:[ {url:'http://img04.tooopen.com/images/20130712/tooopen_17270713.jpg'} , {url:'http://img04.tooopen.com/images/20130617/tooopen_21241404.jpg'} , {url:'http://img04.tooopen.com/images/20130701/tooopen_20083555.jpg'} , {url:'http://img02.tooopen.com/images/20141231/sy_78327074576.jpg'} ] }, onLoad: function () { } })
index.wxss如下:
/**index.wxss**/ .swiper { height: 400rpx; width: 100%; } .swiper image { height: 100%; width: 100%; }
picker 从底部弹起的滚动选择器
现支持三种选择器,通过mode来区分,分别是普通选择器,时间选择器,日期选择器,默认是普通选择器。
时间选择器:mode = time;
普通选择器:mode = selector;
日期选择器:mode = date;
value->表示选中的日期,格式为"YYYY-MM-DD"->String;
start->表示有效日期范围的开始,字符串格式为"YYYY-MM-DD"->String;
end->表示有效日期范围的结束,字符串格式为"YYYY-MM-DD"->String;
fields->有效值 year,month,day,表示选择器的粒度->String;
bindchange->value 改变时触发 change 事件,event.detail = {value: value}->EventHandle;
disabled->是否禁用->Boolean;
index.wxml如下:
<picker mode="date" value="{{date}}" start="2017-01-01" end="2099-12-31" bindchange="bindDateChange"> <view class="picker"> 当前选择: {{date}} </view> </picker>
index.js如下:
Page({ data: { date: '2017-01-01' }, //事件处理函数 bindDateChange: function (e) { console.log('picker发送选择改变,携带值为', e.detail.value) this.setData({ date: e.detail.value }) } })
url->应用内的跳转链接->String;
open-type->跳转方式->String;(navigate/redirect/switchTab)
index.wxml如下:
<navigator url="/pages/navigate/navigate?title=navigate" hover-class="navigator-hover">跳转到新页面</navigator>
index.wxss如下:
.navigator-hover { color:blue; }