微信小程序——input格式 & 移动拖拽视图-movable-view & tabbar页面跳转

I）input输入框

<view class="section__title">2.联系电话:</view>
    <input name="username" type="number" maxlength="11" bindinput="inputPhoneNum" placeholder="如：188******95/05535209886" style='border:1px solid #ccc;height:30px;border-radius: 50rpx左右弧度; padding-left:10px框内光标停留位置' />

 

II）小程序-移动拖拽视图-movable-view

redclcik:function(sender){
    wx.showModal({
      title: '点击红色',
      content: '',
    })
    console.log(sender);
  },
  redmove:function(sender){
     console.log(sender);
    // console.log(sender.changedTouches[0].pageX);
    
  },

<view>移动视图控件</view>
<!-- 创建一个move-area -->
<movable-area style="width:100%;height:1000rpx;background:gray;">
  <!-- 可以移动view 黄色、宽高100rpx-->
  <movable-view style='background:yellow;width:100rpx;height:100rpx;' direction="all">
  </movable-view>
  <!-- 可以移动view 红色、宽高100rpx-->
  <movable-view style='background:red;width:100rpx;height:100rpx;' direction="all" bindtap='redclcik' bindtouchmove='redmove'>
  </movable-view>
</movable-area>

我做的： 

wxml

<movable-area style="width:100%;height:1000rpx;">

  <!-- 可以移动view 红色、宽高100rpx-->
  <movable-view x="0" y="258" style="width:150rpx;height:60rpx;" direction="all">
    <button open-type="contact" session-from="weapp" class="cs_button">
      <image class="cs_image" src="http://www.xianlema.xyz/LI/miniproimg/logo.png"></image>
    </button>
  </movable-view>
  </movable-area>

wxss

.cs_button {
  background-color: #9dff00;
  border: 0 solid #ffffff;
  height: 60rpx;
  width: 150rpx;
             //position:fixed;
            //float: right;
            //bottom: 60px;
            //right: 5px;  

    border-radius: 500px;
    box-shadow: 4px 1px 1px #cccccc;
}

.cs_button:after {
  border: 0px;
}

.cs_image {
  width: 60rpx;
  height: 60rpx;
}

III）页面跳转

//tabbar->tabbar：保留表格数据
          wx.switchTab({
                  url: '../index/index',
            })

 

//tabbar->tabbar：不保留表格数据
          wx.reLaunch({
                  url: '../index/index',
            })