微信web小程序开发1

wxml文件-结构

view独占一行，可以设置长款高

text行内显示，不可以设置长宽高

image行内显示，可以设置宽和高

    <image src=” ”></image>

 

swiper 轮播

       <swiper>

              <swiper-item></swiper-item>

</swiper>

    属性：

       autoplay=’true’自动播放

       duration=’400’一屏走完的时间

       interval=’1000’ 一屏和下一屏的间隔

 

input标签：输入框

    <input></input>

 

button标签：按钮

 

slider标签：进度条

         block-size 小球的大小

         block-color 小球的颜色

         backgroundColor背景颜色

         selected-color 选中的颜色

         min 最小值

         max 最大值

         value 当前值

 

wxss

1. view {

　　　　font-size:

　　　　width:

　　　　height:

　　　　background:

　　}

 

2. .className {

　　font-size:

　　width:

　　height:

　　background:

　　}

3. .className text{

　　}

 

属性：

1. font-size: 字体大小
2. background: 背景颜色
3. width: 宽
4. height: 高
5. border: 边框

　　　　eg: border: 2rpx solid(dashed/dotted) color

1. text-align: 文本对齐方式
2. line-height: 文字高度
3. border-radius: 圆角
4. margin-left(right/ top/ bottom):与边缘距离
5. white-space: nowrap     不折行
6. overflow: hidden          超出部分隐藏
7. text-overflow: ellipsis     超出部分变成…
8. display:  inline-block    允许在一行
9. display: flex                  弹性盒子

　　　　父类 display: flex

　　　　子类 flex: 1 剩下的都是他的