微信小程序 —— (小问题 一)

2018-9-19遇到的问题

微信小程序

一、判断语句

<image class='snatch' wx:if="{{item.surplusQuantity==0}}" src='图片地址'></image>

1.判断

{{item.surplusQuantity==0}}

这个数据为0时（为0时if就为true），显示上面的图片

二、渲染数据

1、for循环

  <view>上传截图:</view>
  <view class='mt30 images' wx:if="{{order.imageUrlResDtoList}}" wx:for="{{order.imageUrlResDtoList}}" >
    <view class='tc'>
      <image src='{{imageDomain+item.userImageUrl}}' mode="widthFix"></image>
      <view>{{typeList[item.type-1]}}</view>
    </view>
  </view>
</view>

• 得到

{{order.imageUrlResDtoList}}

这个结果是数组，用for循环渲染至下面

• 数组里面是item项
• 将item里面的各项渲染至下面
• 用索引渲染

{typeList[item.type-1]}}

得到索引：

[item.type-1]

.
三、下拉刷新

//在 json 文件中定义
    {
      "enablePullDownRefresh": true
    }

四、下拉刷新，不回弹

onPullDownRefresh: function () {
	 wx.stopPullDownRefresh();
  },

五、点击播放视频全屏查看

html:
<view wx:if="{{ play }}" class="pr video-wrap" >
<video controls autoplay id="myVideo"
   src="{{playUrl}}" class="video" enable-play-gesture="true"></video>
   <cover-view class="close-wrap">
   // 关闭按钮
    <cover-image src="../../../images/closeVideo.png" mode="widthFix" class="close-play" bindtap='stopPlay'></cover-image>
    
  </cover-view>
</view>
      css:
    .video-wrap{
       height: 100%;
     }
    .video-image,.video{
      margin: auto ;
      width: 100%;
      height: 420rpx;
      display: block;
      border-radius: 10rpx;
    }
    .play-btn{
      width: 16%;
    }
.close-wrap,.close-play{
  width: 80rpx;
  height: 80rpx;
}
.close-wrap{
  /* background: #eee; */
  position: absolute;
  top: 10rpx;
  right: 30rpx;
  z-index: 200;
  border-radius: 50%;
}

.video{
  width: 100%;
  height: 100%;
}

六、点击复制

copyText: function (e) {
    wx.setClipboardData({
      data: e.currentTarget.dataset.text,
      success: function (res) {
        wx.getClipboardData({
          success: function (res) {
            wx.showToast({
              title: '复制成功',
              icon: 'none',
            })
          }
        })
      }
    })
  },

未完待续…