小程序开发：flex--swiper--movable area--icon

flex

.container{
  display: flex;
  /* flex-direction: row; */
  /* sort on left; */
  /* flex-direction: row-reverse; */
  /* sort on right */
  /* flex-direction: column; */
  /* top to down */
  /* flex-direction: column-reverse; */
  /* down to top*/
  
  /* defult no wrap */
  /* flex-wrap: nowrap; */
  /* flex-wrap: wrap; */
  /* flex-wrap: wrap-reverse */
  /* reverse-wrap */

  /* 左对齐 */
  /* justify-content: flex-start */
  /* 右对齐 */
  /* justify-content: flex-end; */
  /* 居中对齐 */
  /* justify-content:center; */
  justify-content:center;
  /* 成员周围包裹空白 */
  /* justify-content:space-around; */
  /* 成员之间留空白 */
  /* justify-content:space-between; */
} 

<view class="container">
    <!-- hover-class触摸时改变渲染的类 -->
    <!-- hover-start-time 触摸时改变的时间 -->
    <view class="a size" hover-class="d" hover-start-time="3000">a</view>
</view>

swiper图标滚动播放

<!-- indicator-dots是否显示面板指示点 -->
<!-- autoplay自动播放 -->
<!-- interval自动播放时间间隔 -->
<!-- duration过度动画时长 -->
<!-- swiper-item为滚动组件的元素 -->
<swiper indicator-dots="{{indicatorDots}}"
  autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
  <block wx:for="{{imgUrls}}">
    <swiper-item>
      <image src="{{item}}" class="slide-image" width="355" height="150"/>
    </swiper-item>
  </block>
</swiper>

<!-- slider滑动条 -->
<!-- show-value min max设置数值 -->
<!-- bindchange绑定滑动事件 -->
<button bindtap="changeIndicatorDots"> indicator-dots </button>
<button bindtap="changeAutoplay"> autoplay </button>
<slider bindchange="intervalChange" show-value min="500" max="2000"/>
<slider bindchange="durationChange" show-value min="1000" max="10000"/>

js

Page({
  data: {
    imgUrls: [
      'https://images.unsplash.com/photo-1551334787-21e6bd3ab135?w=640',
      'https://images.unsplash.com/photo-1551214012-84f95e060dee?w=640',
      'https://images.unsplash.com/photo-1551446591-142875a901a1?w=640'
    ],
    indicatorDots: false,
    autoplay: false,
    interval: 5000,
    duration: 1000
  },
  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
    })
  }
})

scroll

<!--index.wxml-->
<!-- bindscrolltoupper当滚动到顶部时绑定一个事件 -->
<!-- bindscroll绑定滚动时的事件 -->
<!-- upper-threshold触发事件的阈值 -->
<!-- scroll-into-view滚动到指定id的view组件 -->
<!-- scroll-top设置竖直滚动条距顶部的位置 -->
<!-- scroll-left设置横向滚动条距左边的位置 -->
<!-- enable-back-to-top点击状态栏回到顶部 -->
<!-- scroll-with-animation过渡动画 -->
<scroll-view scroll-y="true" style="height:300rpx;" bindscrolltoupper="toupper" bindscrolltolower="tolower" upper-threshold ="0" lower-threshold="0" enable-back-to-top="true" scroll-with-animation="true" scroll-into-view ="c">
    <view id ="a" class="a size">a</view>
    <view id ="b" class="b size">b</view>
    <view id ="c" class="c size">c</view>
    <view id ="d" class="d size">d</view>
    <view id ="e" class="e size">e</view>
</scroll-view>

<!-- 横向滚动 -->
<scroll-view class= "container" scroll-x="true" style="height:300rpx;" scroll-into-view="c">
    <view id ="a" class="a size">a</view>
    <view id ="b" class="b size">b</view>
    <view id ="c" class="c size">c</view>
    <view id ="d" class="d size">d</view>
    <view id ="e" class="e size">e</view>
</scroll-view>

js

Page({
  data:{

  },
  toupper: function(){
    console.log("scroll to top");
  },
  tolower: function () {
    console.log("scroll to fooder");
  }
  
})

movable area

<movable-area class="father-size">
    <!-- direction移动的方向 -->
    <!-- out-of-bounds当滑块超出范围后是否还能移动 -->
    <!-- damping移动阻尼 -->
    <!-- scale双指缩放 -->
    <!-- scale-min scale-max缩放的最大最小倍数 -->
    <!-- disable禁用拖动 -->
    <!-- bindchange绑定拖动事件 -->
    <!-- bindscale绑定缩放事件 -->
    <movable-view class="size" direction = "all" out-of-bounds="true" x="50" y="100" bindchange = "dochange" >
    </movable-view>
</movable-area>

js

Page({
  data: {
  },
  dochange: function(){
    console.log("be moved")
  }
})

icon

<icon type = "success" size="66" color="red"></icon>
<icon type = "success_no_circle" size="66"></icon>
<icon type = "info" size="66"></icon>
<icon type = "warn" size="66" ></icon>
<icon type = "waiting" size="66" ></icon>
<icon type = "cancle" size="66" ></icon>
<icon type = "download" size="66" ></icon>
<icon type = "search" size="66" ></icon>
<icon type = "clear" size="66" ></icon>


<!-- selectable文本是否可选 -->
<!-- \n \t转义 -->
<view>
    <text selectable="true">this is a text \n nextline</text>
</view>


<!-- decode解码 -->
<view>
    <text selectable="true" decode="true">&nbsp; &lt; &gt; &amp; &apos; &ensp; &emsp;</text>
</view>


<!-- <富文本> -->
<view>
    <rich-text nodes ="{{mycontent}}"></rich-text>
</view>
<!-- percent 百分比 -->
<!-- show-info 显示百分比 -->
<!-- stroke-width显示进度条的宽度 -->
<!-- activeColor前景色 -->
<!-- backgroundColor背景色 -->
<!-- active填充动画 -->
<!-- active-mode动画模式， backwards从头开始 forwards从上次结束开始 -->
<progress percent="30" show-info="true" stroke-width="10" activeColor="green" backgroundColor="grey" active="true"></progress>
<progress percent="{{mypercent}}" show-info="true" stroke-width="10"      active-mode="forwards" active="true"></progress>
<button bindtap = "addpercent">tap to add</button>

js

Page({
  data: {
    // 富文本参数数组
    mycontent:[
      {
        name: "img",
        attrs:{
          class:"u-courseCardWithTime-img_img161",
          src: "http://edu-image.nosdn.127.net/c3046f2a240f4d7fbc0c2582f4daa904.jpg?                        imageView&quality=100",

        }
      }
    ],
    mypercent: 15
  },
  dochange: function(){
    console.log("be moved")
  },

  addpercent: function(){
    var newpercent = this.data.mypercent + 15;
    this.setData({
      mypercent: newpercent
    })
  }
})

原文地址：https://blog.csdn.net/weixin_44130043/article/details/98373561