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

前端之家收集整理的这篇文章主要介绍了微信小程序——input格式 & 移动拖拽视图-movable-view & tabbar页面跳转前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

I)input输入框

<pre class="has">
<code class="language-html"><view class="section__title">2.联系电话:
   

 

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);        },

移动视图控件        

我做的: 

wxml

<pre class="has">
<code class="language-html"><movable-area style="width:100%;height:1000rpx;">

 
  <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">
   
 
 

wxss

<pre class="has">
<code class="language-css">.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)页面跳转

<pre class="has">
<code class="hljs language-javascript">//tabbar->tabbar:保留表格数据
          wx.switchTab({
                  url: '../index/index',            })

 

<pre class="has">
<code class="hljs language-javascript">//tabbar->tabbar:不保留表格数据
          wx.reLaunch({
                  url: '../index/index',            })

 

猜你在找的微信小程序相关文章