zoukankan      html  css  js  c++  java
  • 小程序-demo:小程序示例-page/component

    ylbtech-小程序-demo:小程序示例-page/component

     以下将展示小程序官方组件能力,组件样式仅供参考,开发者可根据自身需求自定义组件样式,具体属性参数详见小程序开发文档。

    1. page/component返回顶部
    1、
    a) .js
    Page({
      data: {
        list: [
          {
            id: 'view',
            name: '视图容器',
            open: false,
            pages: ['view', 'scroll-view', 'swiper']
          }, {
            id: 'content',
            name: '基础内容',
            open: false,
            pages: ['text', 'icon', 'progress']
          }, {
            id: 'form',
            name: '表单组件',
            open: false,
            pages: ['button', 'checkbox', 'form', 'input', 'label', 'picker', 'radio', 'slider', 'switch', 'textarea']
          }, {
            id: 'nav',
            name: '导航',
            open: false,
            pages: ['navigator']
          }, {
            id: 'media',
            name: '媒体组件',
            open: false,
            pages: ['image', 'audio', 'video']
          }, {
            id: 'map',
            name: '地图',
            pages: ['map']
          }, {
            id: 'canvas',
            name: '画布',
            pages: ['canvas']
          }
        ]
      },
      kindToggle: function (e) {
        var id = e.currentTarget.id, list = this.data.list;
        for (var i = 0, len = list.length; i < len; ++i) {
          if (list[i].id == id) {
            list[i].open = !list[i].open
          } else {
            list[i].open = false
          }
        }
        this.setData({
          list: list
        });
      }
    })
    b) .json
    {
        "navigationBarTitleText": "小程序官方组件展示"
    }
    c) .wxml
    <view class="index">
      <view class="index-hd">
        <image class="index-logo" src="resources/kind/logo.png"></image>
        <view class="index-desc">以下将展示小程序官方组件能力,组件样式仅供参考,开发者可根据自身需求自定义组件样式,具体属性参数详见小程序开发文档。</view>
      </view>
      <view class="index-bd">
        <view class="kind-list">
          <block wx:for-items="{{list}}" wx:key="{{item.id}}">
            <view class="kind-list-item">
              <view id="{{item.id}}" class="kind-list-item-hd {{item.open ? 'kind-list-item-hd-show' : ''}}" bindtap="kindToggle">
                <view class="kind-list-text">{{item.name}}</view>
                <image class="kind-list-img" src="resources/kind/{{item.id}}.png"></image>
              </view>
              <view class="kind-list-item-bd {{item.open ? 'kind-list-item-bd-show' : ''}}">
                <view class="navigator-box {{item.open ? 'navigator-box-show' : ''}}">
                  <block wx:for-items="{{item.pages}}" wx:for-item="page" wx:key="*item">
                    <navigator url="pages/{{page}}/{{page}}" class="navigator">
                      <view class="navigator-text">{{page}}</view>
                      <view class="navigator-arrow"></view>
                    </navigator>
                  </block>
                </view>
              </view>
            </view>
          </block>
        </view>
      </view>
    </view>
    d) .wxss
    @import "../common/index.wxss";
    e)
    2、pages
    3、resources
    -kind
    -pic
    4、
    2.  ./pages/view 试图容器返回顶部
    1、view
    a) .js
    b) .json
    c) .wxml
    d) .wxss
    e)
    2、scroll-view
    a) .js
    b) .json
    c) .wxml
    d) .wxss
    e)
    3、swiper
    a) .js
    b) .json
    c) .wxml
    d) .wxss
    e)
    4、
    3. ./pages/content 基础内容返回顶部
    1、text
    a) .js
    b) .json
    c) .wxml
    d) .wxss
    e)
    2、icon
    a) .js
    b) .json
    c) .wxml
    d) .wxss
    e)
    3、progress
    a) .js
    b) .json
    c) .wxml
    d) .wxss
    e)
    4. ./pages/form 表单组件返回顶部
    1、button
    a) .js
    b) .json
    c) .wxml
    d) .wxss
    e)
    2、checkbox
    a) .js
    b) .json
    c) .wxml
    d) .wxss
    e)
    3、form
    a) .js
    b) .json
    c) .wxml
    d) .wxss
    e)
    4、input
    a) .js
    b) .json
    c) .wxml
    d) .wxss
    e)
    5、label
    a) .js
    b) .json
    c) .wxml
    d) .wxss
    e)
    6、picker
    1、view
    a) .js
    b) .json
    c) .wxml
    d) .wxss
    e)
    7、radio
    a) .js
    b) .json
    c) .wxml
    d) .wxss
    e)
    8、slider
    a) .js
    b) .json
    c) .wxml
    d) .wxss
    e)
    9、switch
    a) .js
    b) .json
    c) .wxml
    d) .wxss
    e)
    10、textarea
    a) .js
    b) .json
    c) .wxml
    d) .wxss
    e)
    11、
    5. ./pages/nav 导航返回顶部
    1、navigator
    a) .js
    b) .json
    c) .wxml
    d) .wxss
    e)
    2、
     
    6. ./pages/media 媒体组件返回顶部
    1、image
    a) .js
    b) .json
    c) .wxml
    d) .wxss
    e)
    2、audio
    a) .js
    b) .json
    c) .wxml
    d) .wxss
    e)
    3、video
    a) .js
    b) .json
    c) .wxml
    d) .wxss
    e)
    4、
    7. ./pages/map 地图返回顶部
    1、map
    a) .js
    b) .json
    c) .wxml
    d) .wxss
    e)
    2、
    8. ./pages/canvas 画布返回顶部
    1、canvas
    a) .js
    b) .json
    c) .wxml
    d) .wxss
    e)
    2、
    9.返回顶部
     
    10.返回顶部
     
     
    11.返回顶部
     
    warn 作者:ylbtech
    出处:http://ylbtech.cnblogs.com/
    本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
  • 相关阅读:
    Cf的一些总结
    Goodbye 2019
    牛客多校第8场 A题
    19牛客多校第二场 H题
    Hihocoder1673
    记一次根据图片原尺寸设置样式,并进行缩放和拖拽
    鱼骨时间轴案例(转自CSDN,原文链接附于文中)
    jQuery横向上下排列鱼骨图形式信息展示代码时光轴样式(转自CSDN,原文链接附于文中)
    mxGraph实现鱼骨图(因果图)(转自CSDN,链接附于文中)
    erlang win64位包下载链接
  • 原文地址:https://www.cnblogs.com/storebook/p/9517154.html
Copyright © 2011-2022 走看看