精华内容
下载资源
问答
  • 微信小程序 表单Form实例 表单Form的应用很广泛,我们可以利用form设计登录注册,也可以设计一种答题问卷的形式,今天主要讲一下form的使用 form表单,将组件内输入的”switch”,”input”,”checkbox”,”slider”,...
  • 微信小程序-媒体及表单组件demo 用于小程序表单制作以及媒体资源交互
  • 本文实例讲述了微信小程序提交form操作。分享给大家供大家参考,具体如下: 在微信小程序中也存在form组件,bindsubmit这个属性可以用于携带 form 中的数据触发 submit 事件,它鞋带的参数形式如下: event.detail ...
  • 微信小程序form 相关文章: 微信小程序 Button 微信小程序 radio 微信小程序 slider 微信小程序 switch 微信小程序 textarea 微信小程序 picker-view 微信小程序 picker 微信小程序 label 微信小程序 input  ...
  • 主要介绍了微信小程序form表单组件示例代码,文章给大家提到了一些相关属性名和类型及说明,需要的朋友可以参考下
  • 微信小程序|设置表单界面

    千次阅读 2020-06-03 00:00:00
    欢迎点击「算法与编程之美」↑关注我们!本文首发于微信公众号:"算法与编程之美",欢迎关注,及时了解更多此系列文章。欢迎加入团队圈子!与作者面对面!直接点击!问题描述表单在...

    欢迎点击「算法与编程之美」↑关注我们!

    本文首发于微信公众号:"算法与编程之美",欢迎关注,及时了解更多此系列文章。

    欢迎加入团队圈子!与作者面对面!直接点击!

    问题描述

    表单在小程序中非常常见,几乎每一个小程序都会有表单的界面。一些登录界面,身份验证界面,都是由表单来填写信息的。表单的内容有很多,提示性的输入框,手机号码短信验证的输入框以及错误提示输入框等。那么应该如何来设置一个完整的表单界面呢?

    解决方案

    不同的输入框类型构成了一个完整的表单,需要对不同的输入框进行设置。在json中对相关组件的引入,wxml中进行API的参数配置。 

    1.在json中调用van-field组件。

    代码示例:

      "usingComponents": {

        "van-field": "/dist/field/index"

    }

    2.在wxml调用表单组件并对API参数的配置。

    Value为当前输入的值,required设置表单必填星号,clearable设置是否启用清除控件,label输入框左侧的文本,placeholder输入框为空时的占位符,error将输入内容标红,border是否显示内边框。

    代码示例:

    <van-cell-group>

      <van-field

        value="{{ number }}"

        required

        clearable

        label="学号"

        icon="question-o"

        placeholder="请输入学号"

        bind:click-icon="onClickIcon"

      />

    </van-cell-group>

    <van-cell-group>

      <van-field

        value="{{ username }}"

        label="用户名"

        placeholder="请输入用户名"

        error

      />

      <van-field

        value="{{ phone }}"

        label="手机号"

        placeholder="请输入手机号"

        error-message="手机号格式错误"

        border="{{ false }}"

      />

    </van-cell-group>

    <van-cell-group>

      <van-field

        value="{{ sms }}"

        center

        clearable

        label="短信验证码"

        placeholder="请输入短信验证码"

        border="{{ false }}"

        use-button-slot

      >

        <button slot="button" size="mini" type="primary">发送验证码</button>

      </van-field>

    </van-cell-group>

     

     

    图 1 效果图

    结语

    设置表单的时候一定要根据不同的要求对API的参数进行配置。一个简单的输入框仅仅需要一个field标签就够了,但常见的输入框都是五花八门的,这些样式都是由表单的配置参数来设置的,这样就需要掌握熟悉这些参数的性质。

    END

    实习编辑   |   王文星

    责       编   |   江汪霖

     where2go 团队


       

    微信号:算法与编程之美          

    长按识别二维码关注我们!

    温馨提示:点击页面右下角“写留言”发表评论,期待您的参与!期待您的转发!

    展开全文
  • 搜索框样式 及form提交实现 先看效果图 .js bt_search(e){ console.log('搜索',e) }, .wxml <form bindsubmit="bt_search"> <view class="view_search"> <view class="view_icon_input">...

    搜索框样式 及form提交实现

    第一种风格

    在这里插入图片描述

    .js

    bt_search(e){
        console.log('搜索',e)
      },
    

    .wxml

    <form bindsubmit="bt_search">
      	<view class="view_search">
      		<view class="view_icon_input">
      			<icon class="searchcion" size='15' type='search'></icon>
      			<!-- 注意:input必须要设置name,否则form提交时候会获取不到 -->
      			<input class="input_search" name='searchValue' placeholder="请输入姓名" value="{{searchValue}}" />
      		</view>
      		<view>
      			<button class='bt_sousuo' form-type="submit">搜索</button>
      		</view>
      	</view>
      </form>
    

    .wxss

    /* ****搜索**** begin*/
    
    
    .view_search {
      width: 100%;
      display: flex;
      flex-direction: row;
      margin-top: 20rpx;
      margin-bottom: 20rpx;
      align-items: center;
      justify-content: center;
    }
    
    .view_icon_input {
      /* border: 1px solid #d0d0d0; */
      border-radius: 50rpx;
      width: 85%;
      display: flex;
      flex-direction: row;
      background-color: #ebebeb;
    }
    
    .input_search {
      margin-left: 70rpx;
      height: 70rpx;
      width: 450rpx;
      /* margin-left: 10rpx; */
      /* border-radius: 10px; */
    }
    
    .bt_sousuo {
      /* 搜索按钮 */
      width: 150rpx;
      height: 70rpx;
      color: #ff4d4d;
      background-color: rgb(255, 241, 241);
      border-radius: 98rpx;
      font-size: 35rpx;
      margin: 0rpx 10rpx 0rpx 20rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      
    }
    
    /* 搜索按钮-为了不出现按钮边框断线 */
    .bt_sousuo::after {
      /* 圆角 */
      border-radius: 98rpx;
      /* 取消边框 */
      /* border: 0; */
    }
    
    .searchcion {
      /* 搜索图标 */
      margin: 15rpx 15rpx 15rpx 15rpx;
      position: absolute;
      z-index: 2;
      width: 20px;
      height: 20px;
      text-align: center;
    }
    
    /* ****搜索**** end*/
    

    第二种风格

    在这里插入图片描述

    .wxml

    <view class="view_search">
    	<view class="view_icon_input">
    		<icon class="searchcion" size='20' type='search'></icon>
    		<input class="input_search" placeholder="请输入姓名、身份证号" value="{{searchValue}}" bindblur="input_search" />
    		<view class='sousuo' bindtap="bt_search"><text style="color:#fff">搜索</text></view>
    	</view>
    </view>
    

    .wxss

    /* ****搜索**** begin*/
    .view_search{
      width: 96%;
      display: flex;
      flex-direction: row;
      /* margin-top: 20rpx; */
      /* margin-bottom: 20rpx; */
      align-items: center;
      justify-content: center;
      padding: 2%;
    }
    .view_icon_input{
      /* border: 1px solid #d0d0d0; */ 
      width: 100%; 
      border-radius: 50rpx;
      display: flex;
      flex-direction: row;
      background-color: #ebebeb;
      align-items: center;
      /* justify-content: center; */
      
    }
    .input_search{
      margin-left: 70rpx;
      height: 70rpx;
      width: 100%;
      /* border-radius: 10px; */
    }
    
    .sousuo {
      margin-left: 30rpx;
      margin-right: 10rpx;
      width: 20%;
      height: 50rpx;
      line-height: 50rpx;
      text-align: center;
      background-color: #41A5F5;
      /* border: 1px solid #d0d0d0; */
      border-radius: 50rpx;
      padding: 5rpx;
      font-size: small;
    
    }
    .searchcion {
      margin: 0rpx 15rpx 0rpx 15rpx;
      position: absolute;
      z-index: 2;
      width: 20px;
      height: 20px;
      text-align: center;
    }
    
    /* ****搜索**** end*/
    
    展开全文
  • 微信小程序商城demo(模仿"Coolbuy玩物志"小程序) 主要思路 持续待更新中~ 首页 分类页 分类详情页 详情页 详情页,加入购物车弹窗 购物车 我的页,我的订单 我的页,地址管理 新增地址 样式 倒三角符号实现
  • 微信小程序自动切片生成布局软件是一款根据效果图像画画一样来设计微信小程序,自动生成导出前端页面的快速开发工具。可以很方便、快速地生成小程序的wxml,wcss,js文件。可以大大提高您的工作效率,减少前端布局的...
  • 压缩包里面包含icon.css和main.css两个文件,是colorUI组件库的通用css,自行新建一个文件夹存在,从微信小程序的全局样式那引入即可
  • 微信小程序返回上一级页面 wx.navigateBack({ delta: 1 //返回上一级页面}) html: 保存 js: //提交 submit(){ let data = this.data; let params = data.AddressVo; if(params.name == ){ wx.showToast...
  • 主要介绍了微信小程序 modal弹框组件详解的相关资料,并附简单实例,需要的朋友可以参考下
  • 微信小程序在自带的表单组件中加入了选择器picker,并给出了常用的时间和省市区三级联动选择器,但日常开发中不可能仅仅使用这些选择器,所以我们在学习时先写一个常见的自定义选择器,用于满足项目中的日常需要。...
  • 微信小程序 表单验证 源码

    千次阅读 2019-02-20 11:58:04
    点击预约设计弹出表单  城市,面积不能输入,只能选择  点击位置获取当前定位  源码: Wxml &lt;!--pages/designerList/designerDetail.wxml--&gt; &lt;view&gt; &lt;view class='tc ...

    效果图

    点击预约设计弹出表单

     

    城市,面积不能输入,只能选择

     

    点击位置获取当前定位

     

    源码:

    Wxml

    <!--pages/designerList/designerDetail.wxml-->
    <view>
    
      <view class='tc m_t20'>
        <image src='{{urlhttp + designerDetail.thumb}}' class='imglogo'></image>
        <text class='font18 fontw7 block m_t5'>{{designerDetail.name}}</text>
        <text class='inline_block c_theme font12' style='background:#ffd3b0;padding:4rpx 16rpx;'>{{designerDetail.honour}}</text>
        <view class='font14'>
          <view class='inline_block bd_all m_t10' style='border-color:#ff6000;padding:8rpx 30rpx;border-radius:70rpx;overflow:hidden'>
            <text class='gray6'>设计费用:</text>
            <text class='c_theme'>{{designerDetail.attr_3}}</text>
          </view>      
        </view>
      </view>
      <view class='p_all15'>
        <view class='radius5' style='box-shadow:#ccc 0px 1px 5px;overflow:hidden'>
          <text class='block white p_tb10 tc font15 bg_gray6'>简介</text>
          <view class='font15 gray6 lineH_m p_all10'>
            <text class='block' wx:if="{{designerDetail.attr_2 !== ''}}">-作品:{{designerDetail.attr_2}}</text>
            <text class='block' wx:if="{{designerDetail.attr_1 !== ''}}">-擅长:{{designerDetail.attr_1}}</text>
            <text class='block' wx:if="{{designerDetail.attr_4 !== ''}}">-毕业院校:{{designerDetail.attr_4}}</text>
            <text class='block' wx:if="{{designerDetail.attr_5 !== ''}}">-从业年限:{{designerDetail.attr_5}}</text>
            <text class='block' wx:if="{{designerDetail.attr_6 !== ''}}">-设计理念:{{designerDetail.attr_6}}</text>
          </view>
        </view>
      </view>
      <!-- 案例图片 -->
      <view class='p_tb10 p_lr15 font16 gray3'>案例作品</view>
      <view class='p_lr15 p_b20'>
        <view class='m_t10' wx:for="{{designerDetail.pics}}" bindtap='bindpreviewImage' id='{{index}}'>
          <image src='{{urlhttp + item}}' mode='widthFix' style='width:100%;border-radius:40rpx;'></image>
        </view>
      </view>
      
      
      <!-- 预约按钮 -->
      <view style='height:100rpx;'></view>
      <view class='pf footbtn flex'>
        <view style='width:50%;border-color:white' class='bd_r white font18 tc bg_theme' data-type='预约设计' bindtap='orderTap'>预约设计</view>
        <view style='width:50%;' class='white font18 tc bg_theme' data-type='预约量房' bindtap='orderTap'>预约量房</view>
      </view>
    
      <!-- 预约表单 -->
      <view class='tip-content-dialog' hidden='{{dialogHidden}}'>
        <view class='tip-dialog-view p_all20 bg_white' style='width:90%;border-radius40rpx;overflow:hidden;'>
          <text class='font15 gray9 inline_block p_b10 p_lr10' bindtap='closeTap'>取消</text>
          <form bindsubmit="formSubmit">
            <view class='p_all10'>
              <view class='formView'>
                <view class='inputs bg_graye gray6 font15 p_tb10 p_lr10'>
                  <picker bindchange="bindPickerzone" value="{{index2}}" range="{{userZoneList}}">
                    <label class='fl m_t5'>所在城市</label>
                    <text class='fr m_t5'>﹀</text>
                    <input class='tr fr' type='text' disabled='disabled' value='{{userZoneList[index2]}}'></input>
                    <view class='cl'></view>
                  </picker>
                </view>
                <view class='inputs bg_graye gray6 font15 p_tb10 m_t15 p_lr10' bindtap='getLocation'>
                  <label class='fl m_t5'>工程位置</label>
                  <text class='fr m_t5'>﹀</text>
                  <input class='tr fr' type='text' disabled='disabled' value='{{userlocation}}'></input>
                  <view class='cl'></view>
                </view>
                <view class='inputs bg_graye gray6 font15 p_tb10 m_t15 p_lr10'>
                  <picker bindchange="bindPickerChange" value="{{index}}" range="{{acreagelist}}">
                    <label class='fl m_t5'>房屋面积</label>
                    <text class='fr m_t5'>﹀</text>
                    <input class='tr fr' type='text' disabled='disabled' value='{{acreagelist[index]}}'></input>
                    <view class='cl'></view>
                  </picker>
                </view>
                <view class='inputs bg_graye gray6 font15 p_tb10 m_t15 p_lr10'>
                  <label class='fl m_t5'>真实姓名</label>
                  <input class='tr fr' type='text' value='' name='name' placeholder='输入真实姓名'></input>
                  <view class='cl'></view>
                </view>
                <view class='inputs bg_graye gray6 font15 p_tb10 m_t15 p_lr10'>
                  <label class='fl m_t5'>手机号码</label>
                  <input class='tr fr' type='number' maxlength='11' name='tele' value='' placeholder='输入手机号码'></input>
                  <view class='cl'></view>
                </view>
              </view>
            </view>
            <view class='tc c_theme font16 p_tb10'>{{orderType}}预约支付:¥{{price}}</view>
            <view class='tc gray9 font13 p_tb10'>预约成功后工作人员将于2个工作日内确认,请保持手机畅通</view>
            <view class='m_tb10 bg_white tc'>
              <button class='bg_theme white btnsubmit font16 tc inline_block' form-type="submit" disabled='{{!btnStatus}}'>立即预约</button>
            </view>
          </form>
        </view>
      </view>
    </view>
      
    

    js

    // pages/designerList/designerDetail.js
    //获取应用实例
    const app = getApp()
    Page({
    
      /**
       * 页面的初始数据
       */
      data: {
        urlhttp: app.d.hostImg,//图片路径参数
        designerDetail: {},
        userlocation: '',//工程位置
        acreagelist: ["60㎡以下", "60㎡-70㎡", "70㎡-100㎡", "100㎡以上"],//面积数组
        userZoneList:[],//城市列表
        price:0,
        dialogHidden:true,
        orderType:'',//预约类型
        index: '',//面积下标
        index2: '',//城市下标
        btnStatus:true,
        designerid:'',//设计师id
      },
    
      /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function (options) {
        var that = this;
        var id = options.id;
        that.setData({
          designerid:id,
        })
        console.log(id)
        wx.showNavigationBarLoading();
        wx.request({
          url: app.d.ceshiUrl + 'home.designerDetail',  
          data: {
            "id": id,
          },
          success: function (res) {
            console.log(res)
            var res = res.data;
            that.setData({
              designerDetail: res,
            })
            wx.hideNavigationBarLoading();
          }
        })
        
        wx.request({
          url: app.d.ceshiUrl + 'home.getService',
          success: function (res) {
            console.log(res)
            var res = res.data;
            that.setData({
              userZoneList: res,
            })
             wx.hideNavigationBarLoading();
          }
        })
    
        //支付金额
        wx.request({
          url: app.d.ceshiUrl + 'home.calc',
          success: function (res) {
            console.log(res)
            var res = res.data;
            that.setData({
              price: res.price,
            })
          }
        })
      },
      //选择所在区域
      getLocation: function (e) {
        var that = this;
        wx.chooseLocation({
          type: 'gcj02', //返回可以用于wx.openLocation的经纬度
          success: function (res) {
            var latitude = res.latitude
            var longitude = res.longitude
            console.log(res)
            that.setData({
              userlocation: res.name,
              latitude: latitude,
              longitude: longitude,
            })
          }
        })
      },
      //所在城市选择
      bindPickerzone: function (e) {
        console.log('picker发送选择改变,携带值为', e.detail.value)
        this.setData({
          index2: e.detail.value
        })
      },
      //房屋面积选择
      bindPickerChange: function (e) {
        console.log('picker发送选择改变,携带值为', e.detail.value)
        this.setData({
          index: e.detail.value
        })
      },
      //图片预览
      bindpreviewImage: function (e){
        var that = this;
        console.log(e.currentTarget.id)
        var index = e.currentTarget.id;
        var picslist = that.data.designerDetail.pics;
        for (var i in picslist) {
          picslist[i] = that.data.urlhttp + picslist[i];
        }
        wx.previewImage({
          current: picslist[index], // 当前显示图片的http链接
          urls: picslist // 需要预览的图片http链接列表
        })
      },
      orderTap: function (e) {
        var that = this;
        console.log(e)
        that.setData({
          orderType: e.target.dataset.type,
          dialogHidden: false,
        })
      },
      closeTap: function () {
        var that = this;
        that.setData({
          dialogHidden: true,
        })
      },
      formSubmit: function (e) {
        var that = this;
        console.log(e.detail);
        var value = e.detail.value;
        var myreg = /^[1][3,4,5,7,8][0-9]{9}$/;//电话校验
        var acreage = that.data.acreagelist[that.data.index];
        var userZone = that.data.userZoneList[that.data.index2];
        var userlocation = that.data.userlocation;
        that.setData({
          btnStatus: false,
        })
        //所在城市
        if (userZone == "" || userZone == null) {
          wx.showModal({
            title: "",
            content: '请选择所在城市',
            showCancel: false,
            success: function (res) {
              if (res.confirm) {
                console.log('用户点击确定')
              }
            }
          })
          that.setData({
            btnStatus: true,
          })
          return false;
        }
        //工程位置
        if (userlocation == "" || userlocation == null) {
          wx.showModal({
            title: "",
            content: '请选择工程位置',
            showCancel: false,
            success: function (res) {
              if (res.confirm) {
                console.log('用户点击确定')
              }
            }
          })
          that.setData({
            btnStatus: true,
          })
          return false;
        }
        //房屋面积
        if (acreage == "" || acreage == null) {
          wx.showModal({
            title: "",
            content: '请选择您的房屋面积',
            showCancel: false,
            success: function (res) {
              if (res.confirm) {
                console.log('用户点击确定')
              }
            }
          })
          that.setData({
            btnStatus: true,
          })
          return false;
        }
        //姓名
        if (value.name == "" || value.name == null) {
          wx.showModal({
            title: "",
            content: '姓名不能为空,请输入姓名',
            showCancel: false,
            success: function (res) {
              if (res.confirm) {
                console.log('用户点击确定')
              }
            }
          })
          that.setData({
            btnStatus: true,
          })
          return false;
        }
        //电话
        if (value.tele == "" || value.tele == null) {
          wx.showModal({
            title: "",
            content: '联系电话不能为空,请输入联系电话',
            showCancel: false,
            success: function (res) {
              if (res.confirm) {
                console.log('用户点击确定')
              }
            }
          })
          that.setData({
            btnStatus: true,
          })
          return false;
        }
        if (!myreg.test(value.tele)) {
          wx.showModal({
            title: "",
            content: '请输入正确的联系电话',
            showCancel: false,
            success: function (res) {
              if (res.confirm) {
                console.log('用户点击确定')
              }
            }
          })
          that.setData({
            btnStatus: true,
          })
          return false;
        }
        wx.showNavigationBarLoading();  
        wx.request({
          url: app.d.ceshiUrl + 'home.booking',
          data: {
            "openid": wx.getStorageSync("openid"),
            "zone": userZone,
            "area": acreage,
            "name": value.name,
            "tel": value.tele,
            "mark": that.data.orderType,
            "desid": that.data.designerid,
          },
          success: function (res) {
            console.log(res)
            var res = res.data;
            var wepay_no = res.wepay_no;
            that.setData({
              wepay_no: wepay_no,
            })
    
    
            //支付
            wx.request({
              url: app.d.ceshiUrl + 'home.pay',
              data: {
                'openid': wx.getStorageSync('openid'),
                'wepay_no': wepay_no,
              },
              method: 'POST', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
              header: {
                'Content-Type': 'application/x-www-form-urlencoded'
              }, // 设置请求的 header
              success: function (rese) {
                console.log(rese.data.zero)
                if (rese.data.zero == 1) {
                  wx.showModal({
                    title: '预约支付',
                    content: '您的账户余额充足,已使用您的账户余额扣除支付',
                    showCancel: false,
                    success: function (res) {
                      if (res.confirm) {
                        console.log('用户点击确定')
                        wx.redirectTo({
                          url: '/pages/my/myMakeorder/myMakeorder',
                        })
                      }
                    }
                  })
                }
                else {
                  that.payment(rese.data)
                }
    
                wx.hideLoading();
              },
              fail: function () {
                // fail
                wx.hideLoading();
                wx.showToast({
                  title: '网络异常!err:wxpay',
                  duration: 2000
                });
              }
            })
            wx.hideNavigationBarLoading();
          }
        })
    
      },
      payment: function (data) {
        //console.log(data);
        var that = this;
        wx.requestPayment({
          'timeStamp': data.timeStamp,
          'nonceStr': data.nonceStr,
          'package': data.package,
          'signType': 'MD5',
          'paySign': data.paySign,
          success: function (res) {
            console.log(res)
            wx.showToast({
              title: '预约提交成功',
              icon: 'success',
              duration: 2000,
              success: function () {
                //验证支付是否成功
                wx.request({
                  url: app.d.ceshiUrl + 'home.payOrderSts',
                  data: {
                    'wepay_no': that.data.wepay_no,
                  },
                  method: 'POST', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
                  header: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                  }, // 设置请求的 header
                  success: function (rese) {
                    console.log(rese)
    
                  }
                })
                wx.redirectTo({
                  url: '/pages/my/myMakeorder/myMakeorder',
                })
              }
            });
    
            
          },
          fail: function (res) {
            console.log(res)
            wx.showToast({
              title: '支付取消',
              icon: '../../images/icon_wrong.png',
              duration: 2000,
              success: function () {
                wx.redirectTo({
                  url: '/pages/designerList/designerList',
                })
              }
            })
            
    
          }
        })
      },
      /**
       * 生命周期函数--监听页面初次渲染完成
       */
      onReady: function () {
    
      },
    
      /**
       * 生命周期函数--监听页面显示
       */
      onShow: function () {
    
      },
    
      /**
       * 生命周期函数--监听页面隐藏
       */
      onHide: function () {
    
      },
    
      /**
       * 生命周期函数--监听页面卸载
       */
      onUnload: function () {
    
      },
    
      /**
       * 页面相关事件处理函数--监听用户下拉动作
       */
      onPullDownRefresh: function () {
    
      },
    
      /**
       * 页面上拉触底事件的处理函数
       */
      onReachBottom: function () {
    
      },
    
      /**
       * 用户点击右上角分享
       */
      onShareAppMessage: function () {
    
      }
    })

    样式:

    /* pages/designerList/designerDetail.wxss */
    .footbtn{
      left: 0;
      bottom: 0;
      right: 0;
    }
    .footbtn view{
      height: 100rpx;
      line-height: 100rpx;
    }
    /* 表单 */
    .formView{
      width: 100%;
    }
    .inputs{
      width: 100%;
      border-radius: 10rpx;
    }
    .inputs input{
      /* width: 68%; */
      text-align: right!important;
      display: inline-block;
      padding-right: 15rpx;
    }
    .btnsubmit{
      padding: 0 60rpx;
      border-radius:60rpx;
      height:70rpx;
      line-height:70rpx;
    }
    .btnsubmit:disabled{
      background: indianred;
    }
    
    /* @import 'common.wxss'; */
    /**app.wxss**/
    .container {
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      padding: 200rpx 0;
      box-sizing: border-box;
    } 
    
    /*padding & margin  */
    .p_all10,.p_all15,.p_all20,.p_all30,.p_lr10,.p_lr15,.p_lr20,.p_tb10,.p_tb20,.p_tb5,.p_lr30,.p_tb15,.p_lr5{
      box-sizing: border-box;
    }
    .p_all10{
      padding: 20rpx;
    }
    .p_all15{
      padding: 30rpx;
    }
    .p_all20{
      padding: 40rpx;
    }
    .p_all30{
      padding: 60rpx;
    }
    .p_lr10{
      padding-left: 20rpx;
      padding-right: 20rpx;
    }
    .p_tb10{
      padding-top: 20rpx;
      padding-bottom: 20rpx;
    }
    .p_tb5{
      padding-top: 10rpx;
      padding-bottom: 10rpx;
    }
    .p_tb15{
      padding-top: 30rpx;
      padding-bottom: 30rpx;
    }
    .p_tb20{
      padding-top: 40rpx;
      padding-bottom: 40rpx;
    }
    .p_lr5{
      padding-left: 10rpx;
      padding-right: 10rpx;
    }
    .p_lr15{
      padding-left: 30rpx;
      padding-right: 30rpx;
    }
    .p_lr20{
      padding-left: 40rpx;
      padding-right: 40rpx;
    }
    .p_lr30{
      padding-left: 60rpx;
      padding-right: 60rpx;
    }
    .p_b10{padding-bottom: 20rpx;}
    .p_b20{padding-bottom: 40rpx;}
    .p_b50{padding-bottom: 100rpx;}
    .m_t5{margin-top: 10rpx;}
    .m_t10{margin-top: 20rpx;}
    .m_t15{margin-top: 30rpx;}
    .m_t20{margin-top: 40rpx;}
    .m_t30{margin-top: 60rpx;}
    .m_r5{margin-right: 10rpx;}
    .m_r10{margin-right: 20rpx;}
    .m_r15{margin-right: 30rpx;}
    .m_r20{margin-right: 40rpx;}
    .m_b10{margin-bottom: 20rpx;}
    .m_b20{margin-bottom: 40rpx;}
    .m_tb5{margin-top: 10rpx;margin-bottom: 10rpx;}
    .m_tb10{margin-top: 20rpx;margin-bottom: 20rpx;}
    .m_tb20{margin-top: 40rpx;margin-bottom: 40rpx;}
    .m_lr10{margin-left:20rpx;margin-right: 20rpx;}
    .m_lr20{margin-left:40rpx;margin-right: 40rpx;}
    
    /*background & color  */
    .bg_white{background-color: white;}
    .bg_grayf{background-color: #f5f5f5;}
    .bg_graye{background-color: #eee;}
    .bg_theme{background-color: #ff6000;}
    .bg_lan{background-color: #343265;}
    .bg_org{background-color: #ff9f00;}
    .bg_black{background-color: #201e1f;}
    .bg_gray9{background-color: #f9f9f9;}
    .bg_grayc{background-color: #ccc;}
    .bg_gray3{background-color: #333333;}
    .bg_blue{background-color: #5b95ff;}
    .bg_gray6{background-color: #666;}
    
    .white{color: white;}
    .blue{color: #00cafd;}
    .black{color: black;}
    .gray2{color: #222;}
    .gray5{color: #555;}
    .gray6{color: #666;}
    .gray9{color: #999;}
    .grayc{color: #ccc;}
    .c_theme{color: #ff6000;}
    .orange{color: orange;}
    .yellow{color: yellow;}
    .green{color: green;}
    .red{color: red;}
    .priceC{color: #f17f2b;}
    
    /*font  */
    .font10{font-size: 20rpx;}
    .font12{font-size: 24rpx;}
    .font13{font-size: 26rpx;}
    .font14{font-size: 28rpx;}
    .font15{font-size: 30rpx;}
    .font16{font-size: 32rpx;}
    .font18{font-size: 36rpx;}
    .font20{font-size: 40rpx;}
    .font22{font-size: 44rpx;}
    .font24{font-size: 48rpx;}
    .font26{font-size: 52rpx;}
    .font28{font-size: 56rpx;}
    .fontw{font-weight: 680;}
    .fontw7{font-weight: 700!important;}
    
    /*border  */
    .bd_t{border-top: 1px solid #eee;}
    .bd_b{border-bottom: 1px solid #eee;}
    .bd_all{border: 1px solid #eee;}
    .bd_tb{border-top: 1px solid #eee;border-bottom: 1px solid #eee;}
    .bd_r{border-right: 1px solid #eee;}
    .bd_colorC{border-color: #ccc;}
    
    .shadowC{box-shadow: #ccc 0px 0px 15px;}
    .radius5{border-radius: 10rpx;}
    .radius10{border-radius: 20rpx;}
    
    /*伪类  */
    .down_ico,
    .left_ico,
    .right_ico{position: relative;height: 100rpx;line-height: 100rpx;}
    .right_ico::after{
      content: ">";
      position: absolute;
      height: 100rpx;
      line-height: 100rpx;
      top: 0;
      right: 0;
      color: #ccc;
      font-size: 24rpx;
    }
    .left_ico{position: fixed;top: 0;left: 0;right: 0;z-index: 99;}
    .left_ico::before{
      content: "<";
      position: absolute;
      height: 100rpx;
      line-height: 100rpx;
      top: 0;
      left: 10rpx;
      color: #fff;
      font-size: 40rpx;
      /* font-weight: 600; */
    }
    
    .flex{display: flex;}
    .block{display: block;}
    .inline_block{display: inline-block;}
    .fr{float: right;}
    .fl{float:left;}
    .tc{text-align: center;}
    .tl{text-align: left;}
    .tr{text-align: right;}
    .tj{text-align: justify;}
    .ti{text-indent: 40rpx;}
    .lineH_s text{line-height: 30rpx;}
    .lineH_m text{line-height: 50rpx;}
    .lineH_l text{line-height: 80rpx;}
    .lineH_xl text{line-height: 100rpx;}
    .pr{position: relative;}
    .pa{position: absolute;}
    .pf{position: fixed;}
    
    
    /*头像  */
    .imglogo{width: 150rpx;height: 150rpx;border-radius: 50%;overflow: hidden;}
    .imglogo-s{width: 100rpx;height: 100rpx;border-radius: 50%;overflow: hidden;}
    
    .cl{clear: both;}
    /*溢出省略  */
    .ellipsis{
      overflow: hidden;
      text-overflow:ellipsis;
      white-space: nowrap;
    }
    
    /*button  */
    .btn_m{
      display: inline-block;
      width: 80%;
      padding: 30rpx 0;
      text-align: center;
      font-size: 32rpx;
      margin: 10rpx 0;
      border: solid 1px #eee;
    }
    /* 常用 */
    .mask{
      position: fixed;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      z-index: 99;
      background:rgba(0, 0, 0, .5); 
    }
    
    
    .tip-content-dialog{
      position: fixed;
      display: flex;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(0,0,0,.5);
      z-index: 99999;
    }
    .tip-content-dialog .tip-dialog-view{
      width: 80%;
      margin: auto;
      border-radius: 25rpx;
      vertical-align: middle;
      animation: tanchu 400ms ease-in;
      /* overflow: hidden; */
      padding: 20rpx; 
    }
    .tip-content-dialog .btn{
      background: #f2f7fa;
    }
    @keyframes tanchu{
      from{
        transform: scale(0,0);
        -webkit-transform: scale(0,0);
      }
      to{
        transform: scale(1,1);
        -webkit-transform: scale(1,1);
      }
    }
    .tip-content-dialog .dialogClose{
      position: absolute;
      right:20rpx;
      top: 10rpx;
      width: 60rpx;
      height: 60rpx;
      line-height: 60rpx;
      text-align: center;
    }
    .navigator-hover{
      background-color:inherit;
      color: inherit;
      opacity: 1; 
    }
    
    
    /* 评价列表 */
    .commentList{
      position: relative;
      padding: 20rpx 20rpx 20rpx 120rpx;
      background: white;
      border-bottom: #eee 1px solid;
    }
    .commentList .userImg{/*头像*/
      position: absolute;
      width: 80rpx;
      height: 80rpx;
      border-radius: 50%;
      z-index: 99;
      top: 20rpx;
      left: 20rpx;
    }
    .commentList .userName{
      font-size: 28rpx;
      color: #555;
      /* font-weight: 600; */
    }
    .commentList .stars image{
      width: 25rpx;
      height: 25rpx;
      margin-right: 6rpx;
    }
    .commentList .commentTxt{
      line-height: 40rpx;
      padding-right: 20rpx;
    }
    .commentList .imglist image{
      width: 90rpx;
      height: 90rpx;
      margin: 10rpx 10rpx 0px 0px;
    }
    .commentList .commentreply{
      background-color: #eee;
      line-height: 40rpx;
    }
    
    .dialogbtn{
      border: white solid 1px;
      border-radius: 40rpx;
      display: inline-block;
      margin: 10rpx auto;
    }
    
    /* 配送进度条 */
    .sliderbar{
      width: 100%;
      height: 12rpx;
      border-radius: 12rpx;
      background: white;
      margin: 90rpx auto -30rpx; 
    }
    .sliderbar .barInner{
      height: 100%;
      border-radius: 15rpx;
    }
    .sliderbar .barInner .innertar{
      height: 100%;
      background: orange;
      border-radius: 15rpx;
      animation: jindu 1s ease;
    }
    @keyframes jindu {
      from{
        width: 0rpx;
      }
      to{
        width: 100%;
      }
    }
    .sliderIcon{
      position: absolute;
      width: 90rpx;
      height: 90rpx;
      z-index: 9;
      top: -80rpx;
    }
    
    /* 覆盖button样式 */
    button.form_button{
      background-color:transparent;
      padding:0;
      margin:0;
      display:inline;
      position:static;
      border:0;
      padding-left:0;
      padding-right:0;
      border-radius:0;
      /* font-size:0rpx; */
      color:transparent;
    }
    button.form_button::after{
      content:'';
      width:0;
      height:0;
      -webkit-transform:scale(1);
      transform:scale(1);
      display:none;
      background-color:transparent;
    }
    
    /* 订单小按钮 */
    .orderbtn{
      display: inline-block;
      border-radius:40rpx;
      padding: 8rpx 30rpx;
    }
    .orderbtn.defult{
      border: #999 1px solid;
      color: #666;
    }
    .orderbtn.on{
      border: #ff6000 1px solid;
      color: #ff6000;/*themeColor*/
    }
    
    /* public footer */
    .footer{
      z-index: 9;
      left: 0;
      right: 0;
      bottom: 0;
      height: 100rpx;
    }
    
    /* 授权窗口 */
    .isMask {
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1000;
        background: #000;
        opacity: 0.5;
    }
    
    .isLogin {
        position: fixed;
        padding: 50rpx 50rpx;
        width: 480rpx;
        height: 320rpx;
        background: #fff;
        top: 50%;
        left: 50%;
        margin-left: -280rpx;
        margin-top: -185rpx;
        z-index: 1001;
    }
    
    .isLoginBtn {
        display: flex;
        justify-content: space-around;
    }
    
    .isLoginBtn button {
        background: #fff;
        width: 100%;
        height: 68repx;
        padding-left: 0rpx;
        padding-right: 0rpx;
        margin-right: 0rpx;
        margin-left: 0rpx;
        font-size: 28rpx;
        margin-top: 50rpx;
        color: #4bad37;
    }
    
    .loginTitle {
        font-size: 34rpx;
    }
    
    .loginshopImg {
        height: 80rpx;
        font-size: 26rpx;
        padding: 20rpx 0rpx;
        border-bottom: 1rpx solid #ececec;
    }
    
    .loginshopImg>image {
        width: 68rpx;
        height: 68rpx;
        border-radius: 50%;
        margin-right: 20rpx;
    }
    
    .isAgary {
        display: flex;
        align-items: center;
        font-size: 24rpx;
        color: #666;
        margin-top: 30rpx;
    }
    
    .isAgary>text {
        margin-right: 20rpx;
    }
    
    /* menus */
    .homeMenus{
      display: inline-block;
      width:20% ;
    }
    .homeMenus image{
      width: 80rpx;
      height: 80rpx;
    }
    
    /* modeltitle */
    .title image{
      width: 40rpx;
      height: 37rpx;
      margin-right: 20rpx;
    }
    
    /**app.wxss**/
    .container {
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      padding: 200rpx 0;
      box-sizing: border-box;
    } 
    
    /*padding & margin  */
    .p_all10,.p_all15,.p_all20,.p_all30,.p_lr10,.p_lr15,.p_lr20,.p_tb10,.p_tb5,.p_tb15{
      box-sizing: border-box;
    }
    .p_all10{
      padding: 20rpx;
    }
    .p_all15{
      padding: 30rpx;
    }
    .p_all20{
      padding: 40rpx;
    }
    .p_all30{
      padding: 60rpx;
    }
    .p_lr10{
      padding-left: 20rpx;
      padding-right: 20rpx;
    }
    .p_tb10{
      padding-top: 20rpx;
      padding-bottom: 20rpx;
    }
    .p_tb5{
      padding-top: 10rpx;
      padding-bottom: 10rpx;
    }
    .p_tb15{
      padding-top: 30rpx;
      padding-bottom: 30rpx;
    }
    .p_lr15{
      padding-left: 30rpx;
      padding-right: 30rpx;
    }
    .p_lr20{
      padding-left: 40rpx;
      padding-right: 40rpx;
    }
    .p_b10{padding-bottom: 20rpx;}
    .p_b20{padding-bottom: 40rpx;}
    .p_b50{padding-bottom: 100rpx;}
    .m_t5{margin-top: 10rpx;}
    .m_t10{margin-top: 20rpx;}
    .m_t20{margin-top: 40rpx;}
    .m_t30{margin-top: 60rpx;}
    .m_r5{margin-right: 10rpx;}
    .m_r10{margin-right: 20rpx;}
    .m_r20{margin-right: 40rpx;}
    .m_b10{margin-bottom: 20rpx;}
    .m_tb10{margin: 20rpx 0;}
    .m_lr10{margin: 0 20rpx;}
    
    /*background & color  */
    .bg_white{background-color: white;}
    .bg_grayf{background-color: #f5f5f5;}
    .bg_graye{background-color: #eee;}
    .bg_theme{background-color: #ff6000;}
    .bg_lan{background-color: #343265;}
    .bg_org{background-color: orange;}
    .bg_black{background-color: #201e1f;}
    .bg_gray9{background-color: #f9f9f9;}
    .bg_grayc{background-color: #ccc;}
    
    .white{color: white;}
    .blue{color: #00cafd;}
    .black{color: black;}
    .gray2{color: #222;}
    .gray5{color: #555;}
    .gray6{color: #666;}
    .gray9{color: #999;}
    .c_theme{color: #ff6000;}
    .orange{color: orange;}
    .yellow{color: yellow;}
    .red{color: red;}
    .priceC{color: #f17f2b;}
    
    /*font  */
    .font10{font-size: 20rpx;}
    .font12{font-size: 24rpx;}
    .font13{font-size: 26rpx;}
    .font14{font-size: 28rpx;}
    .font15{font-size: 30rpx;}
    .font16{font-size: 32rpx;}
    .font18{font-size: 36rpx;}
    .font24{font-size: 48rpx;}
    .fontw{font-weight: 600;}
    
    /*border  */
    .bd_t{border-top: 1px solid #eee;}
    .bd_b{border-bottom: 1px solid #eee;}
    .bd_all{border: 1px solid #eee;}
    .bd_tb{border-top: 1px solid #eee;border-bottom: 1px solid #eee;}
    .bd_r{border-right: 1px solid #eee;}
    .bd_colorC{border-color: #ccc;}
    
    .shadowC{box-shadow: #ccc 0px 0px 15px;}
    .radius5{border-radius: 10rpx;}
    .radius10{border-radius: 20rpx;}
    
    /*伪类  */
    .down_ico,
    .left_ico,
    .right_ico{position: relative;height: 100rpx;line-height: 100rpx;}
    .right_ico::after{
      content: ">";
      position: absolute;
      height: 100rpx;
      line-height: 100rpx;
      top: 0;
      right: 0;
      color: #ccc;
      font-size: 24rpx;
    }
    .left_ico{position: fixed;top: 0;left: 0;right: 0;z-index: 99;}
    .left_ico::before{
      content: "<";
      position: absolute;
      height: 100rpx;
      line-height: 100rpx;
      top: 0;
      left: 10rpx;
      color: #fff;
      font-size: 40rpx;
      /* font-weight: 600; */
    }
    
    .flex{display: flex;}
    .block{display: block;}
    .inline_block{display: inline-block;}
    .fr{float: right;}
    .fl{float:left;}
    .tc{text-align: center;}
    .tl{text-align: left;}
    .tr{text-align: right;}
    .tj{text-align: justify;}
    .ti{text-indent: 40rpx;}
    .lineH_s text{line-height: 30rpx;}
    .lineH_m text{line-height: 50rpx;}
    .lineH_l text{line-height: 80rpx;}
    .lineH_xl text{line-height: 100rpx;}
    .pr{position: relative;}
    .pa{position: absolute;}
    
    
    /*头像  */
    .imglogo{width: 140rpx;height: 140rpx;border-radius: 50%;overflow: hidden;}
    
    .cl{clear: both;}
    /*溢出省略  */
    .ellipsis{
      overflow: hidden;
      text-overflow:ellipsis;
      white-space: nowrap;
    }
    
    /*button  */
    .btn_m{
      display: inline-block;
      width: 80%;
      padding: 30rpx 0;
      text-align: center;
      font-size: 32rpx;
      margin: 10rpx 0;
      border: solid 1px #eee;
    }
    /* 常用 */
    .mask{
      position: fixed;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      z-index: 99;
      background:rgba(0, 0, 0, .6); 
    }
    
    
    .tip-content-dialog{
      position: fixed;
      display: flex;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(0,0,0,.6);
      z-index: 99999;
    }
    .tip-content-dialog .tip-dialog-view{
      width: 80%;
      margin: auto;
      border-radius: 15rpx;
      vertical-align: middle;
      animation: tanchu 400ms ease-in;
      overflow: hidden;
      padding: 20rpx;
    }
    .tip-content-dialog .btn{
      background: #f2f7fa;
    }
    @keyframes tanchu{
      from{
        transform: scale(0,0);
        -webkit-transform: scale(0,0);
      }
      to{
        transform: scale(1,1);
        -webkit-transform: scale(1,1);
      }
    }
    .tip-content-dialog  .dialogClose{
      right:0rpx;
      top: 10rpx;
      width: 60rpx;
      height: 60rpx;
    }
    .navigator-hover{
      background-color:inherit;
      color: inherit;
      opacity: 1; 
    }
    
    
    /* 评价列表 */
    .commentList{
      position: relative;
      padding: 20rpx 20rpx 20rpx 120rpx;
      background: white;
      border-bottom: #eee 1px solid;
    }
    .commentList .userImg{/*头像*/
      position: absolute;
      width: 80rpx;
      height: 80rpx;
      border-radius: 50%;
      z-index: 99;
      top: 20rpx;
      left: 20rpx;
    }
    .commentList .userName{
      font-size: 28rpx;
      color: #555;
      /* font-weight: 600; */
    }
    .commentList .stars image{
      width: 25rpx;
      height: 25rpx;
      margin-right: 6rpx;
    }
    .commentList .commentTxt{
      line-height: 40rpx;
      padding-right: 20rpx;
    }
    .commentList .imglist image{
      width: 90rpx;
      height: 90rpx;
      margin: 10rpx 10rpx 0px 0px;
    }
    .commentList .commentreply{
      background-color: #eee;
      line-height: 40rpx;
    }
    
    .dialogbtn{
      border: white solid 1px;
      border-radius: 40rpx;
      display: inline-block;
      margin: 10rpx auto;
    }
    
    /* 配送进度条 */
    .sliderbar{
      width: 100%;
      height: 12rpx;
      border-radius: 12rpx;
      background: white;
      margin: 90rpx auto -30rpx; 
    }
    .sliderbar .barInner{
      height: 100%;
      border-radius: 15rpx;
    }
    .sliderbar .barInner .innertar{
      height: 100%;
      background: orange;
      border-radius: 15rpx;
      animation: jindu 1s ease;
    }
    @keyframes jindu {
      from{
        width: 0rpx;
      }
      to{
        width: 100%;
      }
    }
    .sliderIcon{
      position: absolute;
      width: 90rpx;
      height: 90rpx;
      z-index: 9;
      top: -80rpx;
    }

     

     同事的,可能代码有重复的,将就看,数据换成自己的就能用了

     

     

     

     

    展开全文
  • 查看weui是否是想要的表单样式,样式大致为: 下载weui 链接:https://pan.baidu.com/s/1jYqX1TEsyPWAqUHLwUm19Q 提取码:kvtc 引入weui (1)将src->style->weui.wxss复制到自己项目里 (2)在app.wxss文件中...
  • 注意:button上面一定要加个类再给它给样式,给button{}给样式是覆盖不了原有的样式的,另外,当type=“primary”、“info”、“warning”、"danger"时给背景颜色是不起作用的! 2.input框样式修改 (1)样式style...
      <form catchsubmit="formSubmit" catchreset="formReset">
            <view class="weui-cell__bd" style="margin: 30rpx 0">
              <text class="label">学生姓名</text>
              <input class="weui-input" name="学生姓名" placeholder="请输入" placeholder-class="placelo"/>
            </view>
            <view class="weui-cell__bd" style="margin: 30rpx 0">
              <text class="label">性别</text>
              <picker bindchange="pickSex" value="{{ gender }}" class="sex" range="{{ columns }}">
                    <view>
                        {{ columns[gender] == "" ? "请输入性别" : "" }}{{ columns[gender] }}
                    </view>
                </picker>
            </view>
            <view class="weui-cell__bd" style="margin: 30rpx 0">
              <text class="label">就读学校</text>
              <input class="weui-input" name="" placeholder="请输入" placeholder-class="placelo"/>
            </view>
            <view class="weui-cell__bd" style="margin: 30rpx 0">
              <text class="label">年纪</text>
              <input class="weui-input" name="" placeholder="请输入" placeholder-class="placelo"/>
            </view>
            <view class="weui-cell__bd" style="margin: 30rpx 0">
              <text class="label">班级</text>
              <input class="weui-input" name="" placeholder="请输入" placeholder-class="placelo"/>
            </view>
            <view class="weui-cell__bd" style="margin: 30rpx 0">
              <text class="label">家长电话</text>
              <input class="weui-input" name="" placeholder="请输入" placeholder-class="placelo"/>
            </view>
            <view class="weui-cell__bd" style="margin: 30rpx 0">
              <text class="label">居住地址</text>
              <input class="weui-input" name="" placeholder="请输入" placeholder-class="placelo" />
            </view>
            <view class="btn-area">
              <button formType="submit" size="default" class="btn">提交</button>
            </view>
          </form>
    
    .weui-cell__bd{
      display:flex;
      justify-content: flex-start;
      align-items: center;
      border-bottom: 2rpx solid #EEEEEE;
      padding: 30rpx 0;
    }
    .weui-cell__bd .label{
      white-space: nowrap;
      margin-right: 22rpx;
      text-align:left;
      width: 20%;
      font-size: 32rpx;
      font-family: SourceHanSansCN-Regular;
      color: #666666;
      padding-left: 40rpx;
    }
    .btn{
    width: 90% !important;
    height: 80rpx;
    background: #EFAA13;
    border-radius: 40rpx;
    font-size: 32rpx;
    font-family: SourceHanSansCN-Regular;
    color: #FFFFFF;
    display:flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    }
    .placelo{
    font-size: 32rpx;
    font-family: SourceHanSansCN-Regular;
    color: #999999;
    text-align:left;
    }
    .sex{
    font-size: 32rpx;
    font-family: SourceHanSansCN-Regular;
    color: #999999;
    }
    

    js

    // pages/education/perfectInformation/perfectInformation.js
    Page({
    
      /**
       * 页面的初始数据
       */
      data: {
        columns: ["请选择", "男", "女"],
        gender: 0 || wx.getStorageSync("gender") * 1,
      },
      pickSex: function(e) {
        this.setData({
            gender: e.detail.value
        });
        // console.log("当前选择性别-sex", e.detail.value);
    },
        onSubmit(values) {
          console.log('submit', values);
        },
    })
    

    1.注意:button上面一定要加个类再给它给样式,给button{}给样式是覆盖不了原有的样式的,另外,当type=“primary”、“info”、“warning”、"danger"时给背景颜色是不起作用的!
    2.input框样式修改
    (1)样式style控制placeholder-style=“color:#CDCDCD”
    (2)类名控制placeholder-class=“placeho”
    .placeho{color:red}

    展开全文
  • 在一些购物平台经常需要将商品加入购物车,像加入购物车按钮、结算按钮、收货列表添加地址按钮都是按钮悬浮底部的,怎么实现这样的功能...下面小编给大家带来了操作按钮悬浮固定在微信小程序底部的实现代码,一起看看吧
  • 小程序好看的表单样式

    万次阅读 多人点赞 2019-07-13 17:03:10
    配合上划线的一个样式,麻雀虽小五脏俱全吧,先看样子 直接用会出错,因为我这里封装了一些东西在common.js文件里面,比如common.SHOWTIPS就是一个wx.showToast的封装,如果感兴趣这种简洁的写法的话可以翻阅我往期...
  • 微信小程序结合了H5、自有组件和原生组件,所以有很多地方不能像普通H5一样对待。 对于表单组件switch,直接修改样式不生效,可以全用.wx-switch-input进行设置。 switch开关组件由于不能靠简单的input实现,所以还...
  • 微信小程序:好看的表格样式

    千次阅读 2020-10-15 15:39:55
    一个在微信小程序中创建表格的demo 效果图 最后做出来大概就是这个样子的,先看下设计图:(画的真好看) 设计图 然后再看下数据返回的格式: 数据返回格式 这数据...o.0... 分析数据得知,后台...
  • 之前上传过wxss后缀的样式表,今天把整个ui组件从github上拷贝下来方便大家下载,下载完直接用微信web开发者工具打开整个文件夹即可
  • 微信小程序表单必填项设置

    千次阅读 2020-10-13 20:19:04
    微信小程序的WeUI样式以及微信小程序开发文档中发现并没有表单必填前的required属性 以及input组件: 中都没有required属性,所以,只能自己创造了。 首先,利用WeUI的flex布局, 官方WeUI代码是这样的: Form:...
  • 微信小程序自定义表格样式

    千次阅读 2019-08-13 13:08:38
    微信小程序中没有关于table组件的内容,所以如果在小程序中需要用到列表样式时,就可以通过flex布局利用view设置样式模仿table的样式 wxml: <view class="table"> <view class="tr">//标题行,设置了一个...
  • 本文实例为大家分享了微信小程序表单验证提交错误提示的具体代码,供大家参考,具体内容如下 表单验证,点击确认发布不能为空错误提示。 以下是效果图: 代码如下: WXML: ...
  • 微信小程序wxss公共样式

    千次阅读 2019-02-18 16:40:32
    感觉可以闲几天,存了备份,还未整理许多项目中遇到的实际问题,先把的wxss(即css)公共样式整理上来(后期自己会搭建自己的网站) 如果各位有什么建议和问题,欢迎留言,看到一定会及时反馈 注:个人喜欢在公共样式...
  • 微信小程序 增、删、改、查操作实例详解 1.以收货地址的增删改查为例 2.文件目录   js文件是逻辑控制,主要是它发送请求和接收数据, json 用于此页面局部 配置并且覆盖全局app.json配置, wxss用于页面的样式...
  • 样式: .viewborder { border: 3px solid #f1bb69; border-radius: 10rpx; padding: 10rpx; margin: 10px; } 2、图片边框阴影效果 示例: 样式: .icon { width: 94% !important; box-shadow:0 0 5px...
  • 今天主要详写一下微信小程序中的Input输入框控件,输入框在程序中是最常见的,登录,注册,获取搜索框中的内容等等都需要,同时,还需要设置不同样式的输入框,今天的代码中都要相应的使用。 首先主页面中将登录的...
  • 微信小程序form表单提交到数据库

    万次阅读 多人点赞 2018-11-28 12:39:32
    1.小程序目录图 js文件是逻辑控制,主要是它发送请求和接收数据, json 用于此页面局部 配置并且覆盖全局app.json配置, wxss用于页面的样式设置, wxml就是页面,相当于html 2.Wxml文件代码 &lt;form ...
  • input微信小程序组件_小程序表单组件_小程序输入框input属性名类型默认值说明最低版本valueString 输入框的初始内容 typeString"text"input 的类型 passwordBooleanfalse是否是密码类型 placeholder...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 6,257
精华内容 2,502
关键字:

微信小程序表单样式

微信小程序 订阅