微信小程序21~30

1.组件案例演示

小程序常用组件：

1. view组件
2. swiper和swiper-item组件
3. image组件
4. text组件
5. navigator组件
6. scroll-view组件
7. 字体图标

在小程序中，想要实现轮播图只需要两个组件swiper和swiper-item
swiper:滑块视图容器，其中只能放置swiper-item组件。
swiper-item：只可放置在swiper组件中，宽高自动设置为100%，代表swiper中的每一项。
interval=“2000"更改时长，两秒后自动切换
indicator-dots 添加小圆点
indicator-color=”#fff"修改小圆点颜色为白色
indicator-active-color="#f3514f"小圆点被激活时的样式
circular 3后面接1，轮播图循环

2.轮播图图片添加

渲染组件用image组件

1. src属性：图片资源地址
2. mode属性：图片裁剪缩放的模式
3. show-menu-by-longpress:长按图片显示菜单(保存，转发给好友、收藏、识别二维码)
4. lazy-load: 图片懒加载（在滑动到一定的距离后（上下三屏），图片才被加载出来）

注意事项：
image默认有宽度和高度，宽是320px,高度是240px
image组件不给src属性设置图片地址，也占据宽高

<!-- 完整展示图片 -->
mode="aspectFit"
只展示图片的左上角
mode="top left"

.swiper {
    swiper {
        height: 360rpx;
        background-color: skyblue;
        image {
            width: 100%;
            height: 100%;
        }
        swiper-item {
            // & 在sass中代表的是父选择器，引用的意思
            //swiper-item:first-child
            // &:first-child {
            //     background-color: lightcoral;
            // }
            // &:last-child {
            //     background-color: lightgreen;
            // }
        }
    }
}

3.绘制公司信息区域

渲染文本，用text组件，常用的属性有两个：

1. user-select: 文本是否可选，用于长按选择文本。
2. space: 显示连续空格。

注意事项：
除了文本节点以外的其他节点都无法长按选中
text组件内只支持text嵌套

space="ensp"文本中的空格全部显示（以中文字符空格一半大小展示）
space="emsp"文本中的空格全部显示（以中文字符空格大小展示）
space="nbsp"以字符大小进行展示

page {
    height: 100vh;
    background-color: #efefef !important;
    padding: 16rpx;
    box-sizing: border-box;

    display: flex;
    flex-direction: column;

    > view {
        &:nth-child(n + 2) {
            margin-top: 16rpx;
        }
    }
}
//轮播图区域样式
.swiper {
    border-radius: 10rpx;
    overflow: hidden;

    swiper {
        height: 360rpx;
        background-color: skyblue;
        image {
            width: 100%;
            height: 100%;
            border-radius: 10rpx;
        }
        swiper-item {
            // & 在sass中代表的是父选择器，引用的意思
            //swiper-item:first-child
            // &:first-child {
            //     background-color: lightcoral;
            // }
            // &:last-child {
            //     background-color: lightgreen;
            // }
        }
    }
}

.info {
    display: flex;
    justify-content: space-between;
    background-color: #fff;
    padding: 20rpx 16rpx;
    border-radius: 10rpx;
    font-size: 24rpx;
}

.good-nav {
    display: flex;
    justify-content: space-between;
    background-color: #fff;
    padding: 20rpx 16rpx;
    border-radius: 10rpx;
    view {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    image {
        width: 80rpx;
        height: 80rpx;
    }
    text {
        font-size: 24rpx;
        margin-top: 12rpx;
    }
}

4.跳转到商品列表

要跳转，用navigation组件

1. url:当前小程序内的跳转链接
2. open-type:跳转方式
   navigate:保留上级（当前）页面，跳转到应用内的某个页面，但不能跳转到tabbar页面
   redirect:关闭上级（当前）页面，跳转到应用内的某个页面 ，但不能跳转到tabbar页面
   switchTab:跳转到tabbar页面，并关闭其他所有非tabbar页面
   reLaunch:关闭所有页面，打开到应用的某个页面
   navigateBack:关闭当前页面，返回上一页面或多级页面，默认返回上一页，若想返回几级，就写几（delta=“2”）

注意事项：
路径后可以带参数，参数与路径之间使用？分隔，参数键与参数值用=相连，不同参数用&分隔
open-type="switchTab"时不支持传参

在进行页面跳转时，需要在路径前加/
<navigator url="/pages/list/list">到商品列表首页</navigator>
跳转不到商品分类页面，因为是tabbar页面
<navigator url="/pages/cate/cate" open-type="navigate">到商品分类页面</navigator>
这个也跳转不到
<navigator url="/pages/cate/cate" open-type="redirect">到商品分类页面</navigator>

传参：
<navigator url="/pages/list/list?id=10&num=hua">到商品列表首页</navigator>

5.推荐商品区域

想实现内容滚动，用scroll-view组件
两个属性：

1. scroll-x:横向滚动
2. scroll-y:纵向滚动

<scroll-view class="scroll-x" scroll-x>
        <view>1</view>
        <view>2</view>
        <view>3</view>
</scroll-view>
<scroll-view class="scroll-y" scroll-y>
        <view>1</view>
        <view>2</view>
        <view>3</view>
</scroll-view>

. scroll-x {
    width: 100%;
    white-space: nowrap;
    background-color: skyblue;

    view {
        display: inline-block;
        width: 300rpx;
        height: 80rpx;

        &:first-child {
            background-color: lightpink;
        }
        &:last-child {
            background-color: lightseagreen;
        }
    }
}
.scroll-y {
    height: 400rpx;
    background-color: lightskyblue;
    margin-top: 10rpx;
    view {
        height: 400rpx;
        &:first-child {
            background-color: lightpink;
        }
        &:last-child {
            background-color: lightseagreen;
        }
    }
}

.good-hot {
    background-color: #fff;
    padding: 16rpx;
    border-radius: 10rpx;
    font-size: 24rpx;
    .scroll-x {
        width: 100%;
        white-space: nowrap;
        view {
            display: inline-block;
            width: 320rpx;
            height: 440rpx;
            margin-right: 16rpx;
            .good-item {
                display: flex;
                flex-direction: column;
                justify-content: space-between;

                text {
                    &:nth-last-of-type(1) {
                        font-weight: bold;
                    }
                }
            }
            image {
                width: 100%;
                height: 320rpx;
            }
            &:last-child {
                margin-right: 0;
            }
        }
    }
}

6.字体图标的使用

一定要加分号，否则会出错

// 导入另一个sass文件
@import "./iconfont/iconfont.sass";

出现这个错误可以不用管

项目设置base64

7.背景图片的使用

用background-image属性来设置元素的背景图像

注意事项：
小程序的background-image不支持本地路径，需要使用网络图片，或者base64，或使用组件

.bg-image {
    background-image: url(http://8.131.91.46.6677/bgimage.png);
}