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

一.组件

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

  • icon 图标

  • progress 进度条

  • 3.表单组件

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

  • radio 单选项目

  • checkbox 多选项目

  • slider 滑动选择器

  • switch 开关选择器

小程序代码块

  1. <!--pages/1/1.wxml-->
  2. <text>首页</text>
  4. <view class="page-section page-section-spacing swiper">
  5. <swiper 
  6. indicator-dots="true"
  7. interval="2000"
  8. circular="true"
  9. autoplay="true"
  10. >
  11. <block  wx:for="{{imgs}}"  >
  13. <swiper-item >
  14. <image src="{{item}}"></image>
  15. </swiper-item>
  16. </block>
  17. </swiper>
  18. </view>
  21. <view>
  22. <text>单选项目</text>
  23. <radio ></radio>
  24. </view>
  26. <view>
  27. <text>多选项目</text>
  28. <checkbox></checkbox>
  29. <checkbox></checkbox>
  30. <checkbox></checkbox>
  31. </view>
  33. <view>
  34. <text>滑动选择器</text>
  35. <slider></slider>
  36. </view>
  38. <view>
  39. <text>开关选择器</text>
  40. <switch></switch>
  41. </view>
  43. <view>
  44. <text>地图</text>
  45. <map></map>
  46. </view>
  49. <view>
  50. <text>icon图标</text>
  51. <icon type="info" size="32"></icon>
  52. <icon type="warn" size="36"></icon>
  53. <icon type="warn" size="40"></icon>
  54. </view>
  56. <view>
  57. <text>进度条</text>
  58. <progress  percent="20"></progress>
  59. </view>

更多相关文章

  1. 微信小程序数据操作、自定义事件、微信API、路由组件、变量作用
  2. 选择器的使用和模块化组件思想
  3. 微信小程序介绍、配置、视图层、逻辑层、页面数据交互等知识点学
  4. PHP:【微信小程序】初识微信小程序，微信小程序配置
  5. 【ThinkPHP框架】tp的视图标签、request请求、数据库链式查询等
  6. Thinkphp6 下载安装视图组件-增删改查-预习视图标签
  7. 【ThinkPHP框架】tp6.0框架安装、控制器、视图、配置文件、数据
  8. 08-Vue_组件交互
  9. vue api实例方法 有四个 $watch $emit $forceUpdate $nextTick！

随机推荐

  1. 打造android ORM框架opendroid(四)——优
  2. PHP android ios相互兼容的AES加密算法
  3. Android界面加载完成后自动弹出软键盘的
  4. 快速体验Android(安卓)2.3
  5. android map的使用方法
  6. Android打包jar 和使用第三方库
  7. [转]Android的Camera架构介绍[有图]
  8. Android核心功能
  9. Android开发知识概要
  10. Android SO文件的兼容和适配