微信小程序入门基本知识

最新推荐文章于 2025-05-05 15:27:13 发布

转载最新推荐文章于 2025-05-05 15:27:13 发布 · 67 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/wyingli/p/6959175.html

微信小程序入门基本知识

<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
    })
  }
})

navigator 页面链接。

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;
}

转载于:https://www.cnblogs.com/wyingli/p/6959175.html