首页 > 小程序教程 > 微信小程序城市空气质量查询页面样式模板制作设计下载

微信小程序城市空气质量查询页面样式模板制作设计下载

上一篇 下一篇
制作好以后效果图如下:
一、wxml页面代码如下:
<!--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>
 
二、wxss样式文件代码如下:
/***
原则一: 继承不如指定
原则二: #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;
}
三、js页面代码如下:
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
    })
  }

});

模板简介:该模板名称为【微信小程序城市空气质量查询页面样式模板制作设计下载】,大小是,文档格式为.,推荐使用打开,作品中的图片,文字等数据均可修改,图片请在作品中选中图片替换即可,文字修改直接点击文字修改即可,您也可以新增或修改作品中的内容,该模板来自用户分享,如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。

相关搜索
  • 下载密码 lanrenmb
  • 下载次数 19,065次
  • 使用软件
  • 文件格式
  • 文件大小
  • 上传时间 06-15
  • 作者 网友投稿
  • 肖像权 人物画像及字体仅供参考
栏目分类 更多 >
热门推荐 更多 >
html5 微信文章 微信素材 微信公众平台 微信模板 单页式简历模板 企业网站 微信图片 响应式 自适应
您可能会喜欢的其他模板