小程式wxss公用模板
text,view,swiper,icon,
button,checkbox-group,checkbox,
input,label,picker,radio-group,radio,slider,switch,textarea,
navigator,image,video,audio,map{
box-sizing: border-box;
}
page{
background-color: #eef1f7;
box-sizing: border-box;
}
.flex-box{
display: flex;
}
.flex-1{
flex: 1;
}
.flex-2{
flex: 2;
}
.flex-3{
flex: 3;
}
.flex-4{
flex: 4;
}
.flex-5{
flex: 5;
}
/* 佔用空白空間 */
.marin-topbottom120{
margin-top: 120rpx;
margin-bottom: 120rpx;
}
.empty-120box{
width: 100%;
height: 120rpx;
}
.fixed-bottom100{
position: fixed;
bottom: 0;
width: 100%;
line-height : 100rpx;
height: 100rpx;
z-index: 999;
}
/* 清空預設button 樣式 */
button{
position: relative;
margin-top: 0;
padding-left: 0;
padding-right: 0;
padding-bottom: 0;
line-height: 100rpx;
background-color: #fff;
border: none;
border-radius: 0;
}
button::after,
button::before {
content: '';
border: none;
}
.fl{float: left;}
.fr{float: right;}
.clearfix:after{
content: "";
clear: both;
display: block;
}
/* 去檢視等多的小箭頭 */
.gomore-icon{
position: absolute;
top: 40rpx;
right: 30rpx;
display: inline-block;
width: 20rpx;
height: 20rpx;
border-right: 5rpx solid #c7c7cc;
border-bottom: 5rpx solid #c7c7cc;
transform: rotate(-45deg);
}
/* 高度使用的 搜尋框 */
.top-search{
display: flex;
position: relative;
padding: 20rpx 30rpx 20rpx 30rpx;
width: 100%;
height: 100rpx;
background-color: #eeeef4;
vertical-align: middle;
border-bottom: 1px solid #e5e5e5;
}
.top-search .input-box{
position: relative;
flex: 6;
}
.top-search .input-box input{
padding: 0 70rpx;
height: 60rpx;
line-height: 60rpx;
background-color: #fff;
font-size: 28rpx;
border-radius: 4rpx;
text-align:left;
}
.top-search .input-box .search-icon{
position: absolute;
top: 15rpx;
left: 22rpx;
width: 30rpx;
height: 30rpx;
}
.top-search .input-box .scan-add{
position: absolute;
top: 10rpx;
right: 20rpx;
width: 40rpx;
height: 40rpx;
}
.top-search .search-btn{
flex: 1;
font-size: 30rpx;
line-height: 60rpx;
color: #20a0ff;
text-align: right;
}
相關推薦
小程式wxss公用模板
text,view,swiper,icon, button,checkbox-group,checkbox, input,label,picker,radio-group,radio,slider,switch,textarea, navigator,image
微信小程式 WXSS
WXSS WXSS(WeiXin Style Sheets)是一套樣式語言,用於描述WXML的元件樣式。 WXSS用來決定WXML的元件應該怎麼顯示。 為了適應廣大的前端開發者,我們的WXSS具有CSS大部分特性。同時為了更適合開發微信小程式,我們對CSS進行了擴充以及修改。 與css相
小程式WXSS佈局
1. 儘量採用flex 佈局,指定flex-direction是row( 從左到右)還是column (從上到下) 特別要記得寫 flex-wrap: wrap; 不然超出螢幕部分不會換行 display: flex; flex-direction: row; flex-w
小程式學習--ES6模板字串用法
我們通常JS變數和字串連線是通過+號來進行,例如這樣: let a = 123; console.log(a+'123') 很簡單 結果就是等於123123;但是有時候看程式碼比較不好懂,不夠明瞭 ES6有另外一個寫法,也就是模板字串,比較簡潔,可讀性更好: let a = 123;
微信小程式雲開發——模板講解之雲函式
在上一張我們已經配好了環境,這章我們按照模板的順序去執行提供的案例,對官方文件進行一個實踐操作。 首先我們點選”點選獲取 openid “文字,發現控制檯報錯: 雲函式 呼叫失敗 Error: errCode: -404011 cloud function executi
小程式使用smart模板的方法
總結:如何在小程式當中使用smarty模板 1.準備 a)擁有smarty模板的api介面架構 例如:TP5 b)小程式的架構 例如:微信小程式 2.介面的小程式分支 1.判斷是不是小程式 2.是小程式請求的情況下將原本要傳輸回去在小程式中進行迴圈渲
小程式 WXSS樣式 選擇器與優先順序
WXSS(weixin stylesheet)是一套樣式語言,用於描述WXML的元件樣式。 就像CSS一樣,必須通過選擇器選擇WXMl的元件,然後進行美化。 一:WXSS選擇器 由於小程式底層採用呼叫原聲元件來構建介面,WXSS不能通過原聲元件來控制組件內部的樣式和位置
微信小程式之template模板
定義模板: <template name="msgItem"> <view> <text> {{index}}: {{msg}} </text&g
小程式怎麼新增模板訊息-微信小程式開發-視訊教程12
模板訊息就是固定格式的訊息, 你可以把訊息裡的部分內容, 替換成適合自己的內容。 微信小程式為我們彙總了幾十個行業, 幾百個模板訊息, 你可以選擇適合自己的模板訊息使用。 微信小程式新增模板訊息流程和方法 登入你的微信小程式後臺,依次選擇‘模板訊息/我的模
微信小程式檢視template模板引用
WXML 提供兩種檔案引用方式import和include。 include可以將目標檔案除了的整個程式碼引入,相當於是拷貝到include位置 temlate.wxml <
小程式學習之模板(template)
原始碼下載 在開發小程式時,使用模板可以避免在程式中多次寫同樣的樣式或者佈局從而減少冗餘程式碼,提高程式碼複用性,便於維護。 我們可以在模板中定義程式碼片段,然後在不同的地方呼叫。大概用法如下: 1、在pages下新建template資料夾,裡邊存放通用的佈局(wxml
微信小程式之登入,模板訊息,服務通知
1.登入流程圖 1).前端呼叫wx.login()獲取code 2).前端呼叫wx.request()傳送code給後端 3).後端根據appid(後臺取得)+appsecret(後臺取得)+code(前端傳送)傳送到微信介面,得到session_key+openid等介面地
微信小程式之傳送模板訊息(通過openid推送訊息給使用者)
一、獲取access_token access_token是介面呼叫的憑證,目前有效期為兩個小時,需要定時重新整理,重複獲取將導致上次獲取的access_token失效。(注:不建議每次呼叫需要acc
給和我一樣的初學者分享個微信小程式.WXSS使用background引入背景圖的辦法
因為專案的緣故,我最近開始學小程式。初入小程式就遇見了個問題,就是在引入背景圖片的時候會出現,下圖的錯誤: 看了錯誤後才發現,原來微信小程式在引入背景圖時需要將圖片格式轉一下,並不是說是我的路徑出現問題了。為了將圖片格式專成base64。現在給所
【微信】 小程式 推送模板訊息 (java)
大致流程圖: Created with Raphaël 2.1.2從微信小程式後臺建立模板獲取access_token拼接微信teamplatedata傳送到微信推送訊息 收集form_id 有時我們需要A使用者操作後對B使用者推送模板訊息這是就需
微信小程式wxss的background本地圖片問題
在web 或者webapp開發中我們習慣了直接飲用本地圖片做背景,例如 .aaa { background: url('img/1.png'); } 但是這種引用方式在微信小程式中是無法使用的,控制檯會顯示如下 不允許使用本地路徑。 於是我將路徑替換為非本地路徑試試: .
微信小程式---wxss常用屬性
以下內容均為個人理解,主要用於備忘 —–前言即廢話篇——- 微信小程式的程式碼和網頁程式設計非常相似,兩者都有JS、JSON檔案,同時WXML=>HTML,WXSS=>CSS。 附上兩條連結:w3school關於
微信小程式WXSS 尺寸單位、樣式匯入、內聯樣式、選擇器、全域性樣式與區域性樣式
WXSS(WeiXin Style Sheets)是一套樣式語言,用於描述 WXML 的元件樣式。 WXSS 用來決定 WXML 的元件應該怎麼顯示。 為了適應廣大的前端開發者,我們的 WXSS 具有 CSS 大部分特性。 同時為了更適合開發微信小程式,我們
小程式提取公用函式到util.js
在小程式中,定義了一項工具檔案utils,此檔案的js旨在本檔案之內有效,當其他子頁面想呼叫其中的js方法或者變數時,需要兩步驟:1:在utils被呼叫的js檔案中,面向物件的方式模型輸出: module.exports={要呼叫的函式名稱:要呼叫的函式名稱 };2:在要呼
微信小程式wxss border及border-radius屬性
--------------------border------------------- 一.邊框:border 設定物件邊框的特性。 1.語法:border:length style color 2.style:none ,hidden,dotted,d