问题:
引入swiper 设置了背景颜色没有效果
引入scroll 无效果
这两个问题都犯了相同的错误，在解答之前，先说说下小程序与传统html的区别
1. 小程序是一种应用，运行的环境是微信,钉钉或者支付宝等APP；H5是一种技术，依附的外壳是是浏览器。
比如说，微信小程序只能在微信里面运行，用H5所制作的网页可以在浏览器里运行。
2.开发语言不同。比如微信小程序自己开发了一套WXML标签语言和WXSS样式语言，并非直接使用标准的HTML5+CSS3
3.组件封装不同。小程序独立出来了很多原生APP的组件，在HTML5需要模拟才能实现的功能，小程序里可以直接调用组件。
在H5里面当我们要给一个标签设置颜色，背景，大小的时候，就需要引入CSS样式，如下：给一段文字设置颜色
<p class="text">这是一个段落。</p>
在CSS里面就是这样写：
.text{
color:blue;
}
以上代码就给这段文字设置成了蓝色。
同样在小程序里面也是一样的，虽然小程序自己有一套标签语言和样式语言，但基本写法差距不大。这里拿钉钉小程序举例。去给一个view设置背景颜色和大小
#axml文件
<view class = "container"></view>
#acss文件
.container{
background-color: #49A9EE;
width: 100%;
height: 300rpx;
}
这里设置高度为100% 就是整个屏幕的宽，设置高度为rpx,在移动端上，推荐都设置高宽推荐使用rpx 而不是px，因为rpx可以做到根据屏幕宽度进行自适应，如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。
然后再看看今天出现问题的axml
<view>
<swiper
indicator-dots="{{indicatorDots}}"
autoplay="{{autoplay}}"
interval="{{interval}}"
>
<swiper-item key="swiper-item-{{index}}" a:for="{{background}}">
<view class="swiper-item bc_{{item}}"></view>
</swiper-item>
</swiper>
<view class="btn-area">
<button class="btn-area-button" type="default" onTap="changeIndicatorDots">indicator-dots</button>
<button class="btn-area-button" type="default" onTap="changeAutoplay">autoplay</button>
</view>
<slider onChange="intervalChange" value="{{interval}}" show-value min="2000" max="10000"/>
</view>
swiper-item 下的 view标签是这样写的 <view> 这个标签应用了如下样式 swiper-item bc_{{item}}这里实际上两个样式，第一个是swiper-item, 第二个是bc_{{item}},而item的值是循环backgroud得到的,
在js里面就可以看到 background:['green','red','blue'],
所以，第二个样式相应的就是 bc_green bc_red bc_blue
<swiper-item key="swiper-item-{{index}}" a:for="{{background}}">
<view class="swiper-item bc_{{item}}"></view>
</swiper-item>
但为什么依旧没有背景颜色,这时候我们查看相应的acss文件。内容如下：
.swiper-item{
width: 100%;
height: 300px;
}
发现只有一个样式，没有bc_blue，bc_green，bc_red，当然就没有背景颜色。我们修改acss代码如下：
.swiper-item{
width: 100%;
height: 300px;
}
.bc_blue {
background-color: #49A9EE;
}
.bc_red {
background-color: #F04134;
}
.bc_green {
background-color: #00A854;
}
然后ctrl + s 保存 重新编译，就发现样式就生效了，效果图如下：
BY~FE$XNCUFXL3G_HE9IF3W.png
钉钉小程序swiper这个组件常常用来做首页的banner 也就是轮播图。
而scroll这个组件就是和做长列表，比如商品推荐，因为手机的屏幕大小有限，放不了太多的信息，采用这种方式就方便用户浏览。
网友评论