微信Weui教程

微信小程序weui在线入门教程-WeUi表单组件-uploader上传

时间:2019/1/13 11:28:34  作者:互联网  来源:网络转载  查看:14591  评论:0
内容摘要:效果图wxml代码<view class="page">  <view class="page__hd">    <view class="page__titl...
效果图
微信小程序weui在线入门教程-WeUi表单组件-uploader上传

wxml代码

<view class="page">

  <view class="page__hd">

    <view class="page__title">Uploader</view>

    <view class="page__desc">上传组件</view>

  </view>

  <view class="page__bd">

    <view class="weui-cells">

      <view class="weui-cell">

        <view class="weui-cell__bd">

          <view class="weui-uploader">

            <view class="weui-uploader__hd">

              <view class="weui-uploader__title">图片上传</view>

              <view class="weui-uploader__info">{{files.length}}/2</view>

            </view>

            <view class="weui-uploader__bd">

              <view class="weui-uploader__files" id="uploaderFiles">

 

                <block wx:for="{{files}}" wx:key="*this">

                  <view class="weui-uploader__file" bindtap="previewImage" id="{{item}}">

                    <image class="weui-uploader__img" src="{{item}}" mode="aspectFill" />

                  </view>

                </block>

 

                <view class="weui-uploader__file">

                  <image class="weui-uploader__img" src="/images/pic_160.png" mode="aspectFill" />

                </view>

                <view class="weui-uploader__file">

                  <image class="weui-uploader__img" src="/images/pic_160.png" mode="aspectFill" />

                </view>

                <view class="weui-uploader__file">

                  <image class="weui-uploader__img" src="/images/pic_160.png" mode="aspectFill" />

                </view>

                <view class="weui-uploader__file weui-uploader__file_status">

                  <image class="weui-uploader__img" src="/images/pic_160.png" mode="aspectFill" />

                  <view class="weui-uploader__file-content">

                    <icon type="warn" size="23" color="#F43530"></icon>

                  </view>

                </view>

                <view class="weui-uploader__file weui-uploader__file_status">

                  <image class="weui-uploader__img" src="/images/pic_160.png" mode="aspectFill" />

                  <view class="weui-uploader__file-content">50%</view>

                </view>

              </view>

              <view class="weui-uploader__input-box">

                <view class="weui-uploader__input" bindtap="chooseImage"></view>

              </view>

            </view>

          </view>

        </view>

      </view>

    </view>

  </view>

</view>



欢迎大家学习我的视频课程:微信小程序-WeUI界面布局设计入门到精通
  Weui项目的引用



相关评论
评论者:      验证码:  点击获取验证码
本类推荐
咨询QQ/微信:45157718 点击这里给我发消息 | 电话:13516821613 | 浙江杭州余杭区东港路118号雷恩科技创新园 | 网站支持:杭州摇亿网络科技 | 浙ICP备06056032号-6 |