微信小程序实习day03

滚动容器

<view>
  <scroll-view scroll-y class="view1" scroll-top="{{scroll-top1}}" bindscrolltoupper="upper" bindscrolltolower="lower" upper-threshold="100"><!-- 竖着展示，右边出现滚动条 scroll-top表示滚动条的默认开始位置
  bindscrolltoupper滚动到最上面时触发，bindscrolltolower滚动到最下面时触发，upper-threshold距离上方一定距离时触发，只要大于就重读触发
   -->
    <view id="red" class="item"></view>
    <view id="green" class="item"></view>
    <view id="blue" class="item"></view>
  </scroll-view>
</view>

<view>--------------</view>

<view>
  <scroll-view scroll-x class="view2"><!-- 横着展示 -->
    <view id="red" class="item"></view>
    <view id="green" class="item"></view>
    <view id="blue" class="item"></view>
  </scroll-view>
</view>

.view1{
  height: 400rpx;
}

.view2{
  white-space: nowrap;/* 保证横向不换行1 */
  width: 100%;
}

.view1 .item{
  width: 500rpx;
  height: 500rpx;
}

.view2 .item{
  width: 500rpx;
  height: 500rpx;
  display: inline-block;/* 保证横向不换行2 */
}

#red{
  background-color: #ff0000;
}

#green{
  background-color: #00ff00;
}

#blue{
  background-color: #0000ff;
}

  upper: function() {
    console.log("111");
  },

  lower: function() {
    console.log("222");
  }

滚动插件使用scroll-y（竖着）或scroll-x（横着实现）

scroll-top="{{scroll-top1}}"  

表示滚动栏初始距离上方或左方的距离，可以用变量的值

bindscrolltoupper="upper" 
bindscrolltolower="lower" 
upper-threshold="100"

第一个，当往上划到顶时，调用函数
第二个，往下滚到底部，调用函数
第三个，距离上方超过一定距离时，触发函数

对于竖着的滚动条而言，需要对其设置高度
对于横着的滚动条，首先需要对它设置white-space: nowrap; 以及宽度，保证内部内容不换行
其次需要对其内部子元素设置display: inline-block;，让其在一行显示

---

单击数字，滚动条自动移动到第数字个滚动栏处

<scroll-view class="view1" scroll-x>
  <view wx:for="{{30}}" wx:key="key" bindtap="scroll" data-id="{{index}}">
    <!-- 从零开始到30 -->
    {{index}}
  </view>
</scroll-view>

<scroll-view class="view2" scroll-y scroll-with-animation scroll-into-view="{{intoView}}"><!-- 指向id的值，当它的值和内部某个id相同，会直接定位到其位置 -->
  <view wx:for="{{30}}" id="view{{index}}">
    {{index}}
  </view>
</scroll-view>

.view1{
  width: 100%;
  white-space: nowrap;
}

.view1 view{
  display: inline-block;
  border: 1px solid red;
  margin: 10rpx;
}

.view2{
  height: 400rpx;
}

.view2 view{
  border: 1px solid red;
  margin: 20rpx;
}

  scroll: function (e) {
    this.setData({
      intoView:"view"+e.currentTarget.dataset.id
    })
    /* console.log(e.currentTarget.dataset.id); */
  }

bindtap="scroll" data-id="{{index}}"

单击时传递参数，这里的index值和内部显示的index的值是相同的
index是一个表示第几项的参数，即使view内部不写也同样有效，名称也可以自定义。

scroll-with-animation

开启滚动动画效果，默认值为false，但是只写这一条就相当于true

scroll-into-view="{{intoView}}"

滚动到参数处，intoView指向id的值，当它的值和内部某个id相同，会直接定位到其位置

id="view{{index}}"

设定id为对应的次序

  scroll: function (e) {
    this.setData({
      intoView:"view"+e.currentTarget.dataset.id
    })
    /* console.log(e.currentTarget.dataset.id); */
  }

e为传入的参数，传入的e是一个超大的数据集合，内部包含了此元素位置、空间大小等参数
这里使用其currentTarget中dataset中的id值，即点击的格子对应的次序

swiper滑动模块

<swiper autoplay interval="2000" indicator-dots indicator-color="red" indicator-active-color="green" circular>
  <swiper-item><image src="../../images/jd1.jpg"></image></swiper-item>
  <swiper-item><image src="../../images/jd2.jpg"></image></swiper-item>
  <swiper-item><image src="../../images/jd3.jpg"></image></swiper-item>
  <swiper-item><image src="../../images/jd4.jpg"></image></swiper-item>
  <swiper-item><image src="../../images/jd5.jpg"></image></swiper-item>
</swiper>

自动播放 间隔 指示点 指示点颜色 当前指示点颜色 第一张和最后一张的衔接

对图片设置宽度填满页面

<swiper autoplay interval="{{interval}}" indicator-dots indicator-color="red" indicator-active-color="green" circular>
  <block wx:for="{{imgUrl}}">
    <swiper-item>
      <image src="{{item.image}}"></image>
    </swiper-item>
  </block>
</swiper>

  data: {
    interval: 2000,
    indicatorColor: "red",
    imgUrl:[
      {image:"../../images/jd1.jpg"},
      {image:"../../images/jd2.jpg"},
      {image:"../../images/jd3.jpg"},
      {image:"../../images/jd4.jpg"},
      {image:"../../images/jd5.jpg"}
    ]
  },

动态遍历

图标

<icon type="success" size="20"></icon>
<icon type="success" size="40"></icon>

<icon type="success_no_circle" size="40"></icon>
<icon type="success_no_circle" color="yellow" size="40"></icon>
<icon type="info" color="green" size="40"></icon>
<icon type="warn" color="red" size="40"></icon>
<icon type="waiting" color="rgb(0,255,0)" size="40"></icon>
<icon type="waiting" color="rgba(0,255,0,0.25)" size="40"></icon>
<icon type="waiting" color="purple" size="40"></icon>
<icon type="cancel" size="40"></icon>
<icon type="download" size="40"></icon>
<icon type="search" size="40"></icon>
<icon type="clear" size="40"></icon>

文本添加与删除

<text selectable="{{true}}">
  {{text}}
</text>
<button bindtap="add">add line</button>
<button bindtap="remove">remove line</button>

// pages/text/text.js
const initData = "this is first line\nthis is second line";
const extraline=[];
Page({

  /**
   * 页面的初始数据
   */
  data: {
    text: initData
  },

  add: function() {
/*     extraline.push("other line");
    extraline.push("other line");
    this.setData({
      text:initData+"\n"+extraline.join("\n")
    }) */
    extraline.push("\nother line");
    extraline.push("\nother line");
    this.setData({
      text:initData+extraline.join("")
    })
  },

  remove: function() {
    if(extraline.length>0)
    {
      extraline.pop();
      this.setData({
        text: initData+extraline.join("")
      })
    }
  },

单击添加两行文字，单击删除一行文字

form表单按钮处理及事件处理

<button size="mini">mini</button>
<button size="default">default</button>
<button size="default" type="default">default</button>
<button size="default" type="primary">default</button>
<button size="default" type="warn">default</button>
<button size="default" disabled>default</button>
<button size="default" disabled="{{false}}">default</button>
<button size="default" plain>default</button>
<button size="default" loading>default</button>

<form bindsubmit="formsubmit">
  <input type="text" name="username" />
  <input type="password" name="pwd" />
  <button data-id="1" form-type="submit" disabled="{{disabled}}">注册</button>
  <button form-type="reset">重置</button>
</form>

<button hover-class="other-button">blue</button>

.other-button{
  background-color: blue;
}

  formsubmit: function(e) {
    this.setData({
      disabled:true
    })
    if(e.detail.value.username.length==0){
      wx.showToast({
        title: '用户名不能为空',
        icon: "error",
        duration: 1500
      })
      this.setData({
        disabled: false
      })
    }
    else{
      console.log(e.detail.value.username.length)
      wx.redirectTo({
        url: '/pages/index/index',
      })
    }
  },