小程序开发入门常见小问题-(1)

1、微信小程序轮播图

制作轮播图最大的问题就是图片之间的无缝衔接，而
在微信小程序中使用swiper组件可以和方便的解决该问题
具体实现脚本：
wxml:

<!-- wxml -->
<swiper class='u-wrp-bnr' indicator-dots='true' autoplay='true' interval='5000' duration='1000' circular='true'>
  <block wx:for="{{bnrUrl}}" wx:for-index="index">
    <swiper-item>
      <image src='{{item.url}}' class='u-img-slide' mode='aspectFill'></image>
    </swiper-item>
  </block>
</swiper>
<!-- wxml --

js:
//js
Page({
  data: {
    "bnrUrl": [{
      "url": "img/1242x366-1531449084.jpg"
    }, {
      "url": "img/1242x366_djj_0706-1530871651.jpg"
    }, {
      "url": "img/1242x366_lyx_0709-1531122892.jpg"
    }, {
      "url": "img/14540040236323_1_o.jpg"
    }]
  }
});
//js

wxss:
//wxss
.u-wrp-bnr {
  width: 100%;
  height: 200rpx;
  display: block;
  position: relative;
  top: 100rpx;
  background: #f0f0f0;
}
.u-img-slide {
  width: 100%;
  height: inherit;
}
//wxss

2、尺寸单位； rpx与px的区别

rpx是微信小程序的尺寸单位，可以根据屏幕的宽度自适应。 1rpx=0.5px 不同设备换算也有区别： iPhone 5 1rpx=0.42px 1px = 2.34rpx iphon6 1rpx = 0.5px 1px=2rpx iphon6s 1rpx = 0.552px 1px=1.81rpx

3、盒子边框四边都设置阴影效果

box-shadow:0 0 10rpx rgba(85, 85, 85, 0.10);

5、在文字或标题下方添加下划线或分割线

利用下边框
text组件设置宽无效
text组件大小可以通过padding值设置
display: inline-block添加此属性，可使text组件设置宽度有效

border-bottom: 1px solid red;padding-bottom: 8px;

6、文字首行缩进

text标签的文字首行缩进，需要先转换为inline-block

text{
  display: inline-block;
   text-indent: 60rpx;
   text-align: left;
}

7、设置行间距

微信小程序 text 标签，发现设置行高后无效。解决办法就是在外层嵌套多一层 view，然后在 view 的样式中设置 line-height 属性即可。

<!-- xxx.wxml -->
<view class='view-text'>
  <text class='text-content'> 嘎嘎嘎嘎嘎嘎嘎嘎嘎嘎嘎嘎嘎嘎嘎嘎</text>
</view>

```wxss
// xxx.wxss
.view-text .text-content {
  font-size: 32rpx;
}

.view-text {
  line-height: 100rpx;
}