微信小程序 简单控件


1.滚动栏设置


<
scroll-view class="container1" scroll-y> <view>1view> <view>2view> <view>3view> scroll-view >
/* pages/list/list.wxss */
.container1 view{
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
}

.container1 view:nth-child(1){
  background-color: lightgreen;
}
.container1 view:nth-child(2){
  background-color: lightblue;
}
.container1 view:nth-child(3){
  background-color: lightcoral;
}

.container1{
  border: 1px solid red;
  width: 100px;
  height: 120px;
}

 2.轮播图



<swiper class="swiper-container" indicator-dots indicator-color="white" indicator-active-color="red" autoplay interval="3000" circular>

<swiper-item>
  <view class="item">Aview>
swiper-item>

<swiper-item>
  <view class="item">Bview>
swiper-item>

<swiper-item>
  <view class="item">Cview>
swiper-item>
swiper>
/* pages/list/list.wxss */
.swiper-container{
  height: 150px;
}
.item{
  height: 100%;
  line-height: 150px;
  text-align: center;
}

swiper-item:nth-child(1) .item{
  background-color: lightgreen;
}
swiper-item:nth-child(2) .item{
  background-color: lightblue;
}
swiper-item:nth-child(3) .item {
  background-color: lightpink;
}

<view>
手机号支持长安转中效果
<text user-select>15930901693text>
view>
<rich-text nodes="

标题

"
>rich-text>