微信小程序学习实测案例整理

目录

一、块元素

二、浮动

三、swiper滑动器

 四、scroll

五、radio单选

六、checkbox-group多选

七、进度条slider

八、选择器picker

九、navigator导航

---

一、块元素

1、为块元素添加边框，方便测试

<view style="border:solid 1px;">第一块级元素</view>

2、限制块元素的宽度后效果如下

<view style="border:solid 1px;width:200px;">第三块级元素第三块级元素第三块级元素第三块级元素</view>

3、限制块元素的高度代码和效果如下： 

<view style="margin-top:10px;border:solid 1px;">
  <view style="height:80px;">块级元素 块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素块级元素
  </view>
</view>

二、浮动

1、浮动测试的代码和效果如下：

<view>
  文本文本文本文本文本文本文本文本文本文本<view style="display:block;float:right;border:solid 1px;margin:20px;">浮动测试浮动测试</view>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
</view>

2、如下为浮动的代码和效果： 

<view>-#1-</view>
<view style="display:flex;">
  <view style="background-color:red;flex-grow:1;height:80rpx;">1</view>
  <view style="background-color:blue;flex-grow:1;height:80rpx;">2</view>
  <view style="background-color:green;flex-grow:1;height:80rpx;">3</view>
</view>
<view>-#2-</view>
<view style="display:flex;height:400rpx">
  <view style="background-color:red;width:250rpx;height:80rpx;">1</view>
  <view style="flex-grow:1;display:flex;flex-direction:column;">
    <view style="background-color:blue;flex-grow:1;height:80rpx;">2</view>
    <view style="background-color:green;flex-grow:1;height:80rpx;">3</view>
  </view>
</view>
<view>-#3-</view>
<view style="display:flex;height:400rpx;flex-direction:column;">
  <view style="background-color:red;height:150rpx;">1</view>
  <view style="flex-grow:1;display:flex;">
    <view style="background-color:blue;flex-grow:1;">2</view>
    <view style="background-color:green;flex-grow:1;">3</view>
  </view>
</view>

<view style="display:flex;height:400rpx">  

    <view>

      <view style="background-color:red;width:250rpx;height:80rpx;">1</view>

      <view style="background-color:rgb(0, 255, 221);width:250rpx;height:80rpx;">2</view>

    </view>

    <view style="background-color:rgb(13, 0, 128);flex-grow:2;height:160rpx;">3</view>     

</view>

实现如下效果：

 可以实现多列的跨行浮动，比如实现如下功能，list的item时图标垂直居中

 

 

三、swiper滑动器

1、wxss文件

<swiper class="banner" indicator-dots="true" autoplay="{{autoplay}}"
current="0" interval="2000" duration="300" bindchange="change">
  <block wx:for="{{sliderList}}"  wx:for-item="item" wx:for-index="idx" >
    <swiper-item class="{{item.className}}">
      <view>
        {{item.name}}   
      </view>
      <view>index:{{idx}}</view>
    </swiper-item>
  </block>
</swiper>
<view>
  <button bindtap="play">暂停|播放</button>
</view>
<view>name:{{query.name}} ,age:{{query.time}}</view>

2、js文件 

const app = getApp()
Page({
  data: {
    query:{},
    autoplay:true,
    sliderList:[
      {className:'bg-red',name:'slider1'},
      {className:'bg-blue',name:'slider2'},
      {className:'bg-green',name:'slider3'}
    ]
  },
  onLoad(query) {
     this.data.query = query;
     this.setData(this.data);
  },
  
  play:function(){
    console.log('ceshi');
    this.setData({
      autoplay:!this.data.autoplay
    })
  },
  change:function(){
    console.log('执行了滚动')
  }
})

 四、scroll

wxss文件

<scroll-view class ="scroll-container" upper-threshold="0" lower-threshold="100" scroll-into-view="{{toView}}" bindscroll="scroll" bindscrolltolower="scrollToLower"
bindscrolltoupper="scrollToUpper" scroll-y="true" scroll-top="{{scrollTop}}">
  <view id="item-1" class="scroll-item bg-red">1 </view>
  <view id="item-2" class="scroll-item bg-blue">2</view>
  <view id="item-3" class="scroll-item bg-red">3 </view>
  <view id="item-4" class="scroll-item bg-blue">4</view>
  <view id="item-5" class="scroll-item bg-red">5 </view>
  <view id="item-6" class="scroll-item bg-blue">6</view>

</scroll-view>
<view class="act">
  <button bindtap="scrollToTop">点击滚动到顶部</button>
</view>

js文件

// pages/scroll/scroll1.js
const app = getApp()
Page({
  data: {
    toView:'item-3'
  },
  onLoad() {
  
  },
  scrollToUpper:function(){
    console.log('滚到顶部事件');
  },
  scrollToLower:function(){
    console.log('滚到底部事件');
  },
  scroll:function(){
    console.log('触发滚动事件');
  },
  scrollToTop:function(){
    console.log('触发自动滚动事件');
    this.setData({
      scrollTop:'0'
    })
  }
})

五、radio单选

<radio-group bindchange="changeChoosed">
  <view wx:for="{{radios}}" >
    <radio value="{{radios[index].value}}" checked="{{radios[index].checked}}" >{{radios[index].text}}</radio>
  </view>
</radio-group>

六、checkbox-group多选

<checkbox-group bindchange="selCheckBox">
  <view wx:for="{{checkbox}}" >
    <radio value="{{checkbox[index].value}}" checked="{{checkbox[index].checked}}" >{{radios[index].text}}</radio>
  </view>
</checkbox-group>

七、进度条slider

<slider show-value="true" max="100" min="0" style="5" value="{{icon.size}}" bindchange="changeSize"></slider>

八、选择器picker

wxss文件如下:

<picker value="{{selIndex}}" range="{{list}}" bindchange="change">
  <view class="picker">
    当前选择了{{list[selIndex]}}
  </view>
</picker>

<picker value="{{selTime}}"  mode="time" start="{{startTime}}" end="{{endTime}}" bindchange="changeTime">
  <view class="picker">
    当前选择了{{selTime}}
  </view>
</picker>
<picker value="{{selDate}}"  mode="date" start="{{startDate}}" end="{{endDate}}" bindchange="changeDate">
  <view class="picker">
    当前选择了{{selDate}}
  </view>
</picker>

 js文件如下：

data:{
    startTime:"00:00",
    endTime:"24:00",
    selTime:"11:30",
    startDate:"2020-01-01",
    endDate:"2020-12-01",
    selDate:"2020-06-01"
}
change:function(e){
    this.setData({
      selIndex:e.detail.value
    })
  },
  changeTime:function(e){
    this.setData({
      selTime:e.detail.value
    });
  },
  changeDate:function(e){
    this.setData({
      selDate:e.detail.value
    });
  }

 效果如下：

九、navigator导航

导航起始页面：

<navigator url="/pages/swiper/swiper?name=hello&time=2021"  >带数据参数过去</navigator>

导航目标页面参数数据的显示 :

<view>name:{{query.name}} ,age:{{query.time}}</view>