微信小程序Day1

scroll-view：滑轮组件

属性：https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html

代码示例：

wxml：　

<scroll-view class="container1" scroll-y>

   <image src="/image/1.jpg" mode="aspectFit"></image>

   <view>B</view>

   <view>C</view>

</scroll-view>

 

wxss：

//定义滑轮视图

.container1 view{

     width: 100px;

     height: 100px;

     text-align: center;

     line-height: 100px;

}

//渲染滑轮视图

.container1 view:nth-child(1){

    background-color: lightgreen;

}

.container1 view:nth-child(2){

    background-color: rgb(144, 158, 238);

}

.container1 view:nth-child(3){

    background-color: rgb(238, 144, 172);

}

//定义滑轮组件

.container1{

    border:1px solid red;

    height: 120px;

    width: 100px;

}

 

swiper：轮播图组件

属性：看文档https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html

代码示例：

wxml：

<swiper class="swiper-container" indicator-dots>

 <swiper-item>

    <image src="/image/1.jpg" mode="widthFix" class="item"></image> //此处image属性链接：https://developers.weixin.qq.com/miniprogram/dev/component/image.html

 </swiper-item>

 <swiper-item>

  <view class="item">B</view>

 </swiper-item>

 <swiper-item>

  <view class="item">C</view>

 </swiper-item>

</swiper>

 

wxss:

.swiper-container{

    height: 150px;

}

.item{

    height: 100%;

    line-height: 150px;

    text-align: center;

}

 

swiper-item:nth-child(2) .item{

    background-color: rgb(226, 77, 146);

}

swiper-item:nth-child(3) .item{

    background-color: rgb(37, 148, 46);

}

 

text : 文本组件

属性：https://developers.weixin.qq.com/miniprogram/dev/component/text.html

text-align：文本位置（如居中）

 

button：按钮组件　

属性：https://developers.weixin.qq.com/miniprogram/dev/component/button.html