<!--main.wxml--> <view class="page"> <view class="container"> <view class="section"> <view class="section__title">你要查询的是:{{inputValue}}</view> <input bindinput="bindKeyInput" placeholder="请输入要查询的城市名称" value="{{inputValue}}"/> </view> <view class="btn-area"> <button type="primary" loading="{{loading}}" disabled="{{disabled}}" bindtap="search"> 查询 </button> </view> <modal class="modal" hidden="{{modalHidden}}" no-cancel bindconfirm="modalChange" bindcancel="modalChange"> {{modalErrorText}} </modal> </view> </view> |
/*** 原则一: 继承不如指定 原则二: #id > .class > 标签选择符 原则三:越具体越强大 原则四:标签#id >#id ; 标签.class > .class CSS优先级权重计算法 CSS优先级包含四个级别(标签内选择符,ID选择符,Class选择符,元素选择符)以及各级别出现的次数! 根据这四个级别出现的次数计算得到CSS的优先级。 CSS优先级的计算规则如下: * 元素标签中定义的样式(Style属性),加1,0,0,0 * 每个ID选择符(如 #id),加0,1,0,0 * 每个Class选择符(如 .class)、每个属性选择符(如 [attribute=])、每个伪类(如 :hover)加0,0,1,0 * 每个元素选择符(如p)或伪元素选择符(如 :firstchild)等,加0,0,0,1 然后,将这四个数字分别累加,就得到每个CSS定义的优先级的值, 然后从左到右逐位比较大小,数字大的CSS样式的优先级就高。 例子: css文件或<style>中如下定义: 1. h1 {color: red;} 一个元素选择符,结果是0,0,0,1 2. body h1 {color: green;} 两个元素选择符,结果是 0,0,0,2 3. h2.grape {color: purple;} 一个元素选择符、一个Class选择符,结果是 0,0,1,1 4. li#answer {color: navy;} 一个元素选择符,一个ID选择符,结果是0,1,0,1 元素的style属性中如下定义: h1 {color: blue;} 元素标签中定义,一个元素选择符,结果是1,0,0,1 如此以来,h1元素的颜色是蓝色。 注意: 1、!important声明的样式优先级最高,如果冲突再进行计算。 2、如果优先级相同,则选择最后出现的样式。 3、继承得到的样式的优先级最低。 虽然当前位置由于 class page中指定了font-size 标签优先级不如class高, 但是原则一 继承不如指定,所以34rpx生效 */ text { margin-bottom:10rpx; font-size: 34rpx; font-family: -apple-system-font,Helvetica Neue,Helvetica,sans-serif; } |
const Constant = require( '../../common/constant.js' ); const util = require( '../../common/utils.js' ); Page( { data: { //状态机数据 inputValue: "", //输入的内容 loading: false, //加载状态 disabled: true, //按钮是否可用 modalHidden: true, //modal弹出状态 modalErrorText:"请求失败,请检测网络"//modal弹出提示文字 }, //输入框绑定的事件 bindKeyInput: function( e ) { let value = e.detail.value; //输入框,当输入的值大于0的时候按钮可用 this.setData( { inputValue: value, disabled: !value.length > 0 }); }, search: function( e ) { //查询按钮 this.setData( { loading: true, disabled:true }); let that = this;//保留page函数中object的引用 //联网 wx.request( { url: Constant.AIR_QUALITY_URL, header: { "Content-Type": "application/json", "apikey": Constant.API_KEY }, data: { "city": this.data.inputValue }, //res = {data: '开发者服务器返回的内容'} success: function( res ) { console.log( res.data ); if( res.data.errNum === 0 ) { //成功 //跳转地址可以写相对路径,绝对路径一定要以/ 开头 这样写pages/air_quality/result是错误的 wx.navigateTo( { url:util.createURL( "./result", res.data.retData), }); }else{ that.setData( { //这个位置应该用page的引用调用 modalHidden: false, modalErrorText:res.data.retMsg }); } }, //失败,弹出modal fail: function() { //console.log(this); //这时候的this不是Page了 that.setData( { //这个位置应该用page的引用调用 modalHidden: false, modalErrorText:"请求失败,请检测网络" }) }, //无论成功与失败,loading都取消 complete: function() { console.log("complete") that.setData( { loading: false, disabled:false }) } }); }, modalChange: function() { this.setData( { modalHidden: true }) } }); |
模板简介:该模板名称为【微信小程序城市空气质量查询页面样式模板制作设计下载】,大小是,文档格式为.,推荐使用打开,作品中的图片,文字等数据均可修改,图片请在作品中选中图片替换即可,文字修改直接点击文字修改即可,您也可以新增或修改作品中的内容,该模板来自用户分享,如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。