小程序scss页面布局
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)
})
},
})
很有意思。
小程序scss页面布局的更多相关文章
- 「小程序JAVA实战」小程序的flex布局(22)
转自:https://idig8.com/2018/08/09/xiaochengxu-chuji-22/ 之前已经把小程序的框架说完了,接下来说说小程序的组件,在说组件之前,先说说布局吧.源码:ht ...
- 小程序 web-view 嵌套的网页跳转到小程序内部页面 实现无缝连接
需要在H5页面被作出判断和处理 点击事件发生时跳转到小程序内部页面 1.引入小程序提供的JS <script type="text/javascript" src=&quo ...
- 微信小程序开发——以简单易懂的浏览器页面栈理解小程序的页面路由
前言: 对于小程序的页面路由,如果没有一定开发经验的话,理解起来还是会有些困难的.哪怕是有一定小程序开发经验的开发者,能够完全理解掌握的恐怕也不多. 这里就以另外一种方式来详细的介绍小程序的页面栈及路 ...
- 微信小程序:页面配置 page.json
微信小程序:页面配置 page.json 一.页面配置 page.json 如果整个小程序的风格是蓝色调,那么可以在 app.json 里边声明顶部颜色是蓝色即可. 实际情况可能不是这样,可能你小程序 ...
- 微信小程序开发--页面结构
一.微信小程序开发--页面文件组成 [page.name].js 页面逻辑文件,用于创建页面对象,以及处理页面生命周期控制和数据处理 [page.name].wxml wxml指的是Wei Xin M ...
- 微信小程序前端页面书写
微信小程序前端页面书写 WXML(WeiXin Markup Language)是框架设计的一套标签语言,结合基础组件.事件系统,可以构建出页面的结构. 一.数据绑定 1. 普通写法 <view ...
- 小程序的flex布局
小程序建议使用flex布局进行排版 flex就是一个盒装弹性布局 flex是一个容器,所有子元素都是他的成员 小程序的flex布局 定义布局 display:flex flex容器的属性: flex- ...
- 图解微信小程序---实现页面的跳转与返回操作
图解微信小程序---实现页面的跳转与返回操作 代码笔记 操作步骤 第一步:在app.json配置文件中,创建跳转页面 第二步:编写首页跳转(注意跳转方式,和设置点击样式类名) 第三步:编写首页样式 第 ...
- 小程序中页面兼容h5标签的解析
有时候当小程序向后台拿数据是一篇html标签的文章时,把它放进小程序会发现很多标签就不兼容,如果要一个个改又很麻烦,有没有方法可以很快地兼容html标签呢? 有个工具可以做到:wxParse 下载了它 ...
随机推荐
- flask框架----flask基础
知识点回顾 1.flask依赖wsgi,实现wsgi的模块:wsgiref,werkzeug,uwsgi 2.实例化Flask对象,里面是有参数的 app = Flask(__name__,templ ...
- 重复打印相同内容(Doc档)的时候自动生成打印编号
昨天突然接到一个好久未联系的朋友电话,说是江湖救急,要打印一份单据,单据上有个号码要自动生成,如下图,最土的办法是打印完一张,手工改下号码,但这种方法估计碰到成百上千张时估计会疯掉 网上找了实现方法, ...
- game to refactor for refactor
first step, only aim to work. it works, but i have not seen the necessaty to use class yet. my quest ...
- linux下nginx整合php
在nginx中药使用php可不像apache那样,因为apache是把php当做自己的一个模块来启动的, 而我们的nginx是把http请求转发给php程序,也就是说,php和nginx是相互独立的的 ...
- matplotlib 画动态图以及plt.ion()和plt.ioff()的使用
学习python的道路是漫长的,今天又遇到一个问题,所以想写下来自己的理解方便以后查看. 在使用matplotlib的过程中,常常会需要画很多图,但是好像并不能同时展示许多图.这是因为python可视 ...
- Tensorflow学习笔记03-使用神经网络做线性回归
import tensorflow as tf import numpy as np #input就是输入数据,输入矩阵,in_size就是输入矩阵的列数(数据属性数量),out_size输出矩阵列数 ...
- python之内置函数与匿名函数
一内置函数 # print(abs(-1)) # print(all([1,2,'a',None])) # print(all([])) #bool值为假的情况:None,空,0,False # # ...
- 【题解】Luogu P3901 数列找不同
我博客中对莫队的详细介绍 原题传送门 不错的莫队练手题 块数就直接取sqrt(n) 对所有询问进行排序 排序第一关键词:l所在第几块,第二关键词:r的位置 考虑Ai不大,暴力开数组 add时如果加之后 ...
- 人机猜拳游戏Java
作业要求: 我的代码: package day20181119;/** * 猜拳游戏 * @author Administrator * @version1.0 */import java.util. ...
- InstallShield.12完美使用
转载:http://www.360doc.com/content/13/0517/10/7918060_286039102.shtml 转载:http://jingyan.baidu.com/arti ...