微信小程序三个视图控件View、ScrollView、Swiper的解读及示例

{{motto}}

 


View组件示范




Scroll-View组件示范




Swiper组件示范

var app = getApp()
Page({
data: {
motto: '基础视图View，滑动视图ScrollView，滑块Swiper',
userInfo: {}
},
 
onLoad: function () {
console.log('onLoad')
var that = this
//调用应用实例的方法获取全局数据
app.getUserInfo(function(userInfo){
//更新数据
that.setData({
userInfo:userInfo
})
})
}
})

/**index.wxss**/
.usermotto {
margin-top: 30px;
font-size: 20px;
}
 
.viewName{
margin-top: 30px;
margin-left: 40px;
margin-right: 40px;
height: 50px;
font-size: 25px;
background-color: #AED2EE;
/**下面是设置三个view视图的文本内容上下左右居中**/
justify-content: center;
display: flex;
align-items: center;
}

/**app.wxss**/
page {
background-color: #fbf9fe;
height: 100%;
}
/**在这里可以把整个小程序所有页面用到的公共样式放在这里，便于每个页面直接调用**/
.viewTitle{
margin-top: 20px;
height: 40px;
text-align: center;
}
.bc_green{
background-color: #09BB07;
}
.bc_red{
background-color: #F76260;
}
.bc_blue{
background-color: #10AEFF;
}
.bc_yellow{
background-color: #FFBE00;
}
.bc_gray{
background-color: #C9C9C9;
}

[/url]

    View展示



    样式一，横向排列
    
        111
        222
        333
    



    样式二，竖向排列
    

        111
        222
        333
    

/**View.wxss**/
.flex-wrp{
    height: 100px;
    display: flex;
    background-color: #ffffff;
}
/**
这里定义了一个样式，另外在总的小程序app.wxss中也可以定义通用的样式，可以应用到每个页面中。
**/
.flex-item{
    width: 100px;
    height: 100px;
    color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
}

    ScrollView视图展示
  
  

    样式一，竖向滑动Vertical
    
    
      
      
        
        
        
        
      
    



    样式二，横向滑动Horizontal
    
    
        
        
        
        
      
    

//ScrollView.js
var order = ['green', 'red', 'yellow', 'blue', 'green']
Page({
})

/**ScrollView.wxss**/
/**更多源码请于51小程序源码版块下载：[url]http://bbs.html51.com/f-36-1/[/url]**/
.scroll-view_H{
  white-space: nowrap;
}
.scroll-view-item{
  height: 200px;
}
.scroll-view-item_H{
  display: inline-block;
  width: 100%;
  height: 200px;
}
.flex-wrp{
    height: 200px;
    display: flex;
    background-color: #ffffff;
}

  
    Swiper视图展示
  
  
    
      
        
          
            
          
        
      
    
    
      
      显示/取消指示点
      
      {{vertical?'横显示':'竖显示'}}
      
      开始/停止轮播
    
    
    轮播一次的时间duration
    
    间隔多长时间显示下一个图interval
  

//Swiper.js
Page({
  data: {
    background: ['green', 'red', 'yellow'],
    indicatorDots: true,    //布尔值变量，用于控制显示/取消指示点
    vertical: false,        //根据这个布尔值的真假，控制滑块视图，横显示或者竖显示
    autoplay: false,        //通过这个开关控制，是否开始轮播，或者停止轮播
    interval: 3000,         //设置间隔多长时间显示下一个图
    duration: 1200          //设置轮播一次的时间
  },
  changeIndicatorDots: function (e) {
    this.setData({
      indicatorDots: !this.data.indicatorDots
    })
  },
  changeVertical: function (e) {
    this.setData({
      vertical: !this.data.vertical
    })
  },
  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
    })
  }
})

/**Swiper.wxss**/
.swiper-item{
  display: block;
  height: 150px;
}