全栈开发工程师微信小程序-上(中)

width: 750rpx;

position: absolute;

<import src="template.wxml">

let app = getApp()

previewImage(event){
 wx.previewImage({
  urls:
 })
}

// 下拉
{
 "enablePullDownRefresh": true
}

<text wx:if="{{!item.image}}">{{item.text}}</text>

navigate: 保留当前页面
redirect: 关闭当前页面
switchTab: 跳转到tabBar页面
reLaunch: 关闭所有页面
navigateBack: 关闭当前页面

wx.showModal({
 title: "",
 content: "",
})
// title提示窗口标题
// content提示内容

hover-class 指定按下去的样式类
hover-stop-propagation 指定是否阻止本节点的祖先节点出现点击态
hover-start-time 按住后多久出现点击态
hover-stay-time 手指松开后点击态保留时间

<view class="section">
  <view class="section__title">flex-direction: row</view>
  <view class="flex-wrp" style="flex-direction:row;">
    <view class="flex-item bc_green">1</view>
    <view class="flex-item bc_red">2</view>
    <view class="flex-item bc_blue">3</view>
  </view>
</view>
<view class="section">
  <view class="section__title">flex-direction: column</view>
  <view class="flex-wrp" style="height: 300px;flex-direction:column;">
    <view class="flex-item bc_green">1</view>
    <view class="flex-item bc_red">2</view>
    <view class="flex-item bc_blue">3</view>
  </view>
</view>

scroll-x 允许横向滚动 
scroll-y 允许纵向滚动
upper-threshold 距顶部/左边多远时
lower-threshold 距底部/右边多远时
scroll-top 设置竖向滚动条位置
scroll-left 设置横向滚动条位置
bindscrolltoupper 滚动到顶部/左边
bindscrolltolower 滚动到底部/右边

<view class="section">
  <view class="section__title">vertical scroll</view>
  <scroll-view
    scroll-y
    style="height: 200px;"
    bindscrolltoupper="upper"
    bindscrolltolower="lower"
    bindscroll="scroll"
    scroll-into-view="{{toView}}"
    scroll-top="{{scrollTop}}"
  >
    <view id="green" class="scroll-view-item bc_green"></view>
    <view id="red" class="scroll-view-item bc_red"></view>
    <view id="yellow" class="scroll-view-item bc_yellow"></view>
    <view id="blue" class="scroll-view-item bc_blue"></view>
  </scroll-view>

  <view class="btn-area">
    <button size="mini" bindtap="tap">click me to scroll into view</button>
    <button size="mini" bindtap="tapMove">click me to scroll</button>
  </view>
</view>
<view class="section section_gap">
  <view class="section__title">horizontal scroll</view>
  <scroll-view class="scroll-view_H" scroll-x style="width: 100%">
    <view id="green" class="scroll-view-item_H bc_green"></view>
    <view id="red" class="scroll-view-item_H bc_red"></view>
    <view id="yellow" class="scroll-view-item_H bc_yellow"></view>
    <view id="blue" class="scroll-view-item_H bc_blue"></view>
  </scroll-view>
</view>

const order = ['red', 'yellow', 'blue', 'green', 'red']
Page({
  data: {
    toView: 'red',
    scrollTop: 100
  },
  upper(e) {
    console.log(e)
  },
  lower(e) {
    console.log(e)
  },
  scroll(e) {
    console.log(e)
  },
  tap(e) {
    for (let i = 0; i < order.length; ++i) {
      if (order[i] === this.data.toView) {
        this.setData({
          toView: order[i + 1]
        })
        break
      }
    }
  },
  tapMove(e) {
    this.setData({
      scrollTop: this.data.scrollTop + 10
    })
  }
})

bindscrolltoupper = "scrollToSide"
bindscrolltolower = "scrollToSide"
bindscroll="scroll"

scrollToSide(e){
 if(e.detail.direction == "top"){
  wx.showToast({
   title: "",
  })
 }else if(e.detail.direction == "bottom"){
  wx.showToast({
   title: "",
  })
 }
}

indicator-dots 是否显示面板指示点
indicator-color 指示点颜色
indicator-active-color 当前选中的指示点颜色
autoplay 是否自动切换
current 当前所在滑块的 index
interval 自动切换时间间隔
duration 滑动动画时长
circular 是否采用衔接滑动
vertical 滑动方向是否为纵向

direction movable-view的移动方向，属性值有all、vertical、horizontal、none
inertia movable-view是否带有惯性
disabled 是否禁用

可覆盖的原生组件包括map、video、canvas、camera、live-player、live-pusher，只支持嵌套cover-view、cover-image，可在cover-view中使用button