登录  /  注册
博主信息
博文 70
粉丝 4
评论 5
访问量 101172
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
PHP:【微信小程序】微信小程序部分组件,微信小程序轮播图
JiaJieChen
原创
900人浏览过

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. <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}}" >
  9. <swiper-item >
  10. <image src="{{item}}"></image>
  11. </swiper-item>
  12. </block>
  13. </swiper>
  14. </view>
  • 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 开关选择器

小程序代码块

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

批改状态:合格

老师批语:很棒,很多都是自己练习的,不错。
本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学