简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home> List of blog posts> PHP:【微信小程序】微信小程序部分组件，微信小程序轮播图
Blogger Information
Blog 70
fans 4
comment 5
visits 103957
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
PHP:【微信小程序】微信小程序部分组件，微信小程序轮播图
JiaJieChen
Original
946 people have browsed it

PHP:【微信小程序】微信小程序部分组件，微信小程序轮播图

一.组件

  • 1.视图容器
编号 名称 功能说明
1 cover-image 覆盖在原生组件之上的图片视图
2 cover-view 覆盖在原生组件之上的文本视图
3 match-media media query 匹配检测节点
4 movable-area movable-view 的可移动区域
5 movable-view 可移动的视图容器，在页面中可以拖拽滑动
6 page-container 页面容器
7 scroll-view 可滚动视图区域
8 share-element 共享元素
9 swiper 滑块视图容器
10 swiper-item 仅可放置在 swiper 组件中，宽高自动设置为 100%
11 view 视图容器
  • swiper 滑块视图容器 也就是 轮播图
       
    
        
  1. class="page-section page-section-spacing swiper">
    2. 
        
    3. 
        
  3. indicator-dots="true"
    4. 
        
  4. interval="2000"
    5. 
        
  5. circular="true"
    6. 
        
  6. autoplay="true"
    7. 
        
  7. >
    8. 
        
  8. wx:for="{{imgs}}">
    9. 
        
    10. 
        
  10. >
    11. 
        
  11. src="{{item}}">
    12. 
        
    13. 
        
    14. 
        
    15. 
        
    16.
  • 2.基础内容
编号 名称 功能说明
1 icon 图标
2 progress 进度条
3 rich-text 富文本
4 text 文本

  • icon 图标

  • progress 进度条

  • 3.表单组件

编号 名称 功能说明
1 button 按钮
2 checkbox 多选项目
3 checkbox-group 多项选择器，内部由多个 checkbox 组成
4 editor 富文本编辑器，可以对图片、文字进行编辑
5 form 表单
6 input 输入框
7 keyboard-accessory 设置 input / textarea 聚焦时键盘上方 cover-view / cover-image 工具栏视图
8 label 用来改进表单组件的可用性
9 picker 从底部弹起的滚动选择器
10 picker-view 嵌入页面的滚动选择器
11 picker-view-column 滚动选择器子项
12 radio 单选项目
13 radio-group 单项选择器，内部由多个 radio 组成
14 slider 滑动选择器
15 switch 开关选择器
16 textarea 多行输入框

  • radio 单选项目

  • checkbox 多选项目

  • slider 滑动选择器

  • switch 开关选择器

小程序代码块

       
    
        
    2. 
        
  2. 首页
    3. 
        
    4. 
        
  4. class="page-section page-section-spacing swiper">
    5. 
        
    6. 
        
  6. indicator-dots="true"
    7. 
        
  7. interval="2000"
    8. 
        
  8. circular="true"
    9. 
        
  9. autoplay="true"
    10. 
        
  10. >
    11. 
        
  11. wx:for="{{imgs}}">
    12. 
        
    13. 
        
  13. >
    14. 
        
  14. src="{{item}}">
    15. 
        
    16. 
        
    17. 
        
    18. 
        
    19. 
        
    20. 
        
    21. 
        
    22. 
        
  22. 单选项目
    23. 
        
  23. >
    24. 
        
    25. 
        
    26. 
        
    27. 
        
  27. 多选项目
    28. 
        
    29. 
        
    30. 
        
    31. 
        
    32. 
        
    33. 
        
    34. 
        
  34. 滑动选择器
    35. 
        
    36. 
        
    37. 
        
    38. 
        
    39. 
        
  39. 开关选择器
    40. 
        
    41. 
        
    42. 
        
    43. 
        
    44. 
        
  44. 地图
    45. 
        
    46. 
        
    47. 
        
    48. 
        
    49. 
        
    50. 
        
  50. icon图标
    51. 
        
  51. type="info"size="32">
    52. 
        
  52. type="warn"size="36">
    53. 
        
  53. type="warn"size="40">
    54. 
        
    55. 
        
    56. 
        
    57. 
        
  57. 进度条
    58. 
        
  58. percent="20">
    59. 
        
    60.
Correcting teacher：欧阳克欧阳克

Correction status：qualified

Teacher's comments：很棒，很多都是自己练习的，不错。
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply withNews Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！