zoukankan      html  css  js  c++  java
  • 微信小程序 简单控件

    1.滚动栏设置

    <!--wxml-->
    <
    scroll-view class="container1" scroll-y> <view>1</view> <view>2</view> <view>3</view> </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.轮播图

    <!--pages/list/list.wxml-->
    <!--轮播图的结构-->
    <swiper class="swiper-container" indicator-dots indicator-color="white" indicator-active-color="red" autoplay interval="3000" circular>
    <!--第一个轮播图-->
    <swiper-item>
      <view class="item">A</view>
    </swiper-item>
    <!--第二个轮播图-->
    <swiper-item>
      <view class="item">B</view>
    </swiper-item>
    <!--第三个轮播图-->
    <swiper-item>
      <view class="item">C</view>
    </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>15930901693</text>
    </view>
    <rich-text nodes="<h1 style='color :red;'>标题</h1>"></rich-text>
  • 相关阅读:
    java 数组声明方法
    python 什么叫迭代
    Golang生成区间随机整数
    Golang字符串格式化
    Golang中map的三种声明方式和简单实现增删改查
    Golang实现二分查找法
    Golang实现冒泡排序法
    Golang切片的三种简单使用方式及区别
    Golang获取int数组里的最大值和下标
    Golang数组注意细节
  • 原文地址:https://www.cnblogs.com/wfswf/p/15782530.html
Copyright © 2011-2022 走看看