关于微信小程序（常用的组件）

常用的组件

1、view与scroll-view组件

- view组件
view组件是微信小程序种主要的容器组件，相当于传统网页中的div，可以用来存放其他任何的子元素
例如：

 <view class='container'>
 <view>
 未曾青梅 青梅枯萎 芬芳满地
 </view>
 </view>

更多关于view组件的属性可以参阅官方文档：https://developers.weixin.qq.com/miniprogram/dev/component/view.html

• scroll-view组件
  有时我们的一些视图，在手机指定的宽度和高度不够存放，这时就可以放在scroll-view组件中

设置横向滚动

1、给scroll-view添加scroll-x=‘true属性’
2、给scroll-view添加white-space：nowrap样式
3、给scroll-view的子元素添加display：inline-block属性

示例代码如下：

<!--index.wxml--> 
<scroll-view class='scroll-x-view' scroll-x>
  <view class='scroll-view-item bg_red'> </view>  
  <view class='scroll-view-item bg_blue'></view>  
  <view class='scroll-view-item bg_green'></view>  
  <view class='scroll-view-item bg_yellow'></view> 
 </scroll-view>

/**index.wxss**/ 
.scroll-x-view {
   
  width: 100%;
  height: 100px;  
  background: gray;
  white-space: nowrap;//（默认值）单行显示 
}
.scroll-x-view .scroll-view-item {
   
  width: 200px;  
  height: 100px;  
  display: inline-block 
}
.bg_red {
     
background: red; 
}
.bg_blue {
     
background: blue; 
}
.bg_green {
     
background: green; 
}
.bg_yellow {
     
background: yellow; 
}

效果：

设置竖向滚动

1、给scroll-view设置scroll-y=‘true’
2、个体scroll-view设置高度

示例代码：

<!--index.wxml--> 
<scroll-view class='scroll-x-view' scroll-y>  
<view class='scroll-view-item bg_red'></view>  
<view class='scroll-view-item bg_blue'></view>  
<view class='scroll-view-item bg_green'></view>  
<view class='scroll-view-item bg_yellow'></view> 
</scroll-view>

/**index.wxss**/ 
.scroll-x-view {
     
width: 100%;  
height: 200px;  
background: gray; 
} 
.scroll-x-view .scroll-view-item {
     
width: 100%;  
height: 100px; 
} 
.bg_red {
     
background: red; 
} 
.bg_blue {
     
background: blue; 
} 
.bg_green {
     
background: green; 
} 
.bg_yellow {
     
background: yellow; 
}

效果：

scrolltoupper和scrolltolower事件

鼠标滚动到距离左边或者顶部、鼠标滚动多距离右边或者底部多少距离的时候会执行这个事件，默认的间隔是50像素

示例：

 <!--index.wxml--> 
 <scroll-view class='scroll-x-view' scroll-y bindscrolltolower="scrolltolower ">  <view style="height:1000px;">  
 </view> 
 </scroll-view>

/**index.wxss**/ 
.scroll-x-view {
     
width: 100%;  
height: 200px;  
background: gray; 
}

// index.js 
// ֺ获取应用实例 
const app = getApp()
Page({
     
scrolltolower: function(event) {
       
console.log(event);  
} 
});

效果：当用户鼠标滚动到最下面时，会在控制台输出事件对象

bindscroll事件

只要scroll-view发生了滚动，就会执行这个事件

示例：

<!--index.wxml--> 
<scroll-view class='scroll-x-view' scroll-y bindscroll="scrollEvent">  
<view style="height:1000px;">  </view> 
</scroll-view>

/**index.wxss**/
.scroll-x-view {
     
width: 100%;  
height: 200px;
background: gray; 
}

// index.js 
// ֺ获取应用实例
const app = getApp()
Page({
     
scrollEvent: function(event) {
       
console.log(event);  
} 
});

有关scroll-view的更多说明请参阅官方文档：https://developers.weixin.qq.com/miniprogram /dev/component/scroll-view.html

2、swiper组件

swiper是一个包裹轮播图的容器组件，里面的子元素必须是swiper-item组件，swiper可以自动的轮播子元素，并且天生就带有指示点，还可以使用手指左右滑动

示例代码：

<!--index.wxml--> 
<swiper class='swiper' autop