• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

小程序scss页面布局

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

html

<view class="main">
  <form bindsubmit="feedback">
    <textarea class="main-content" auto-height placeholder="请输入您的反馈,我们会不断改进" id="content" name="content" />
    
    <view class="main-telephone">
        <label class="" for="telephone">
            手机号
        </label>
        <input id=\'telephone\' name=\'telephone\' type="text" placeholder="请填写(选填)" />
    </view>
    
    <button class="main-submit" id="submit" form-type="submit">我要反馈</button>
  </form>
</view>

scss

page {
    background-color: #ffffff;
}

.main {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    margin-top:50rpx;


    .main-content {
        border:1px solid #D3D3D3;
        min-height: 200rpx;
        margin-bottom:40rpx;
        padding:20rpx;
        font-size:28rpx;
    }

    .main-telephone {
        display:flex;
        label {
            font-size:30rpx;
        }

        input {
            font-size:28rpx;
            margin-left:15rpx;
            margin-top:3rpx;
        }
    }

    .main-submit {
        color:#fff;
        background-color:#FF6D6D;
        margin-top:30rpx;
    }
}

自动生成wxss

page {
  background-color: #ffffff;
}

.main {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  margin-top: 50rpx;
}

.main .main-content {
  border: 1px solid #D3D3D3;
  min-height: 200rpx;
  margin-bottom: 40rpx;
  padding: 20rpx;
  font-size: 28rpx;
}

.main .main-telephone {
  display: flex;
}

.main .main-telephone label {
  font-size: 30rpx;
}

.main .main-telephone input {
  font-size: 28rpx;
  margin-left: 15rpx;
  margin-top: 3rpx;
}

.main .main-submit {
  color: #fff;
  background-color: #FF6D6D;
  margin-top: 30rpx;
}

结构非常清晰,很方便。

这里的表单提交,放到form中。

js

// pages/mine/advice/index.js
const util = require(\'../../../utils/getData.js\');
const app = getApp();

Page({

  /**
   * 页面的初始数据
   */
  data: {

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  },
  feedback: function (e) {
    let that = this;
    let uid = app.globalData.uid;
    let content = e.detail.value.content;
    let telephone = e.detail.value.telephone;

    if (!content) {
      wx.showToast({
        title: \'请填写反馈内容\',
        icon : \'none\',
        duration: 1000
      });
      return;
    }
    util.getData(\'feedback\', {
      uid: uid,
      content: content,
      telephone: telephone,
      method: \'POST\'
    }, function (res) {
      if (res.errno) {
        wx.showToast({
          title: res.errdesc,
          icon : \'none\',
          duration:1000
        });
        return;
      }
      
      wx.showToast({
        title: res.errdesc
      });

      setTimeout(() => {
        wx.navigateBack()
      }, 2000)
    })
  },
})

很有意思。


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
ColorUI 微信小程序 商品详情页模板,仿微信胶囊发布时间:2022-07-18
下一篇:
小程序员醒悟发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap