微信小程序 简单控件
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>