微信小程序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);
}