字符太長(zhǎng)超出部分用…隱藏

overflow: hidden; white-space: nowrap; text-overflow: ellipsis;

多行文字然后超出省略號(hào)隱藏

overflow: hidden; display: -webkit-box; text-overflow: ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical;

文本換行

display: inline-block; white-space: pre-wrap; word-wrap: break-word; width: 100%; height: auto;

網(wǎng)站適應(yīng)手機(jī)屏幕

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-sca" /><%--適應(yīng)手機(jī)屏幕--%>

高度緩慢減少

transition: height 0.5s linear 0s;

文字超出換行

設(shè)置寬度

{width:100px;overflow:hidden;white-space:normal;word-break:break-all; }

nvue

lines: 1; text-overflow: ellipsis;

文字之間的間距

單詞text-indent抬頭距離 letter-spacing字與字間距

flex布局方式的居中顯示

display:flex; justify-content: center || space-between; align-items: center;

文字陰影

box-shadow:0px 0px 10px rgba(0,0,0,0.2);box-shadow: darkgrey 0px 0px 30px 5px;//邊框外陰影box-shadow: darkgrey 0px 0px 30px 5px inset;//邊框內(nèi)陰影 box-shadow:-5px 15px 15px -15px rgba(0,0,0,0.3); //偏移陰影 下邊框陰影box-shadow: 0px 15px 10px -15px red;//邊框外陰影 //淡淡的box-shadow: 0rpx 4rpx 55rpx 7rpx rgba(0, 35, 167, 0.08);圖片居中 background-position:center center;

講解比較詳細(xì)鏈接
https://www.webhek.com/post/css-box-shadow-property.html

文字背景漸變

background-image: linear-gradient(45deg, #d41a1a, #d9e60c);

講解鏈接:
https://www.php.cn/css-tutorial-409954.html

占滿整個(gè)屏幕

width:100%; height:100vh;

不新增，改變?cè)瓉?lái)的值

/deep/ .u-list-image-wrap{border-radius: 0 !important; }

圖片背景

background-image: url(/static/image/bg_.jpg); background-repeat: no-repeat; background-size: 100% 100%;

nvue頁(yè)面兩張圖片層疊的解決方法

<view class="video-item"><image class="video-bg" :src="img" mode="aspectFill"></image><image class="video-bg2" src="../../static/logo.png" mode=""</image> </view> .video-item{width: 235rpx;height: 350rpx;margin: 5rpx 7rpx 5rpx 7rpx;align-items: center;justify-content: center;background-color: #FFFFFF;border-radius: 10rpx;position: relative;.video-bg{width: 235rpx;height: 350rpx;border-radius: 10rpx;position: absolute;}.video-bg2{width: 80rpx;height: 80rpx;border-radius: 10rpx;position: absolute;}}

輸入框選中的時(shí)候邊框問(wèn)題

.from_input:focus {outline:none;border: 1px solid #e4e0e1;border-left: 4px solid #c32139; }

傳統(tǒng)img 圖片會(huì)隨父容器放大縮小，解決方法

.serviceItem{width: 15rem;height: 10rem;background-color: #c32139;background-repeat: no-repeat;background-size: cover; } <div class="serviceItem" style="display: block; background-image:url(img/a1.jpg);"></div>

瀏覽器縮放，是否按照手機(jī)的寬度去展示

<meta name="viewport" content="width=device-width, initial-scale=1">

HTML中使標(biāo)簽鼠標(biāo)放上去時(shí)顯示手形狀

css里面加入下面的代碼

cursor:pointer; //顯示箭頭 cursor:default

CSS或者JS實(shí)現(xiàn)鼠標(biāo)懸停顯示另一元素
想達(dá)到鼠標(biāo)懸停到元素a上，顯示另一個(gè)元素b，可以通過(guò)css實(shí)現(xiàn)也可以通過(guò)js實(shí)現(xiàn)。
js:
寫兩個(gè)函數(shù)：mouseenter，mouseleave，例如：其中
$(“#a”).mouseenter(function() {
$(“#b”).show(“normal”);
});
$(“#a”).mouseleave(function() {
$(“#b”).hide(“normal”);
});

css：a元素和b元素需要滿足一定的關(guān)系，即b是a的直接子元素：如下html元素，div header_login_name_change 是a元素，ul header_login_menu是b元素。
在a元素上寫hover，后面是b元素

蘋果

• 栗子

css，display： block； .a:hover .b { display:block; background: #2B7193; cursor: pointer; }

uniapp 的單選框圓圈太大了，縮小一些

transform:scale(0.7)

隱藏 scroll-view滾動(dòng)條

scroll-view ::-webkit-scrollbar {width: 0;height: 0;background-color: transparent;}

圖片旋轉(zhuǎn)

@-webkit-keyframes rotation{from {-webkit-transform: rotate(0deg);}to {-webkit-transform: rotate(360deg);} } .xuanzhuan{webkit-transform: rotate(360deg);/*animation: rotation 10s linear infinite;//正常用這個(gè)*/ animation: run 10s linear infinite; }

//圖片旋轉(zhuǎn)根據(jù)來(lái)啟動(dòng)動(dòng)畫效果 暫停和繼續(xù)播放

<view class="xuanzhuan" :class="playing?'none':'keepgo'"></view> ...data(){return{playing:false} }.keepgo{animation-play-state: paused; }

圖片文字背景傾斜

.wrap {position: absolute;width: 100%;height: 100%;overflow: hidden;top: 0; }.silk-ribbon {display: inline-block;text-align: center;width: 115px;height: 60rpx;line-height: 60rpx;position: absolute;top: 15px;right: -17px;z-index: 2;overflow: hidden;transform: rotate(45deg);-ms-transform: rotate(45deg);-moz-transform: rotate(45deg);-webkit-transform: rotate(45deg);-o-transform: rotate(45deg);background: #FD9C07;color: #FFFFFF;font-size: 28rpx; }

效果

絕對(duì)定位，根據(jù)手機(jī)或者會(huì)h5瀏覽器

disaply:fixed; bottom: calc(var(--window-bottom) + 10rpx);

uniapp部分

v-if和v-for的一些優(yōu)雅方法，比較實(shí)用

https://mp.weixin.qq.com/s/Khft5gIDxWMW5XeMMJNVLw

返回上一頁(yè)并傳遞參數(shù)

let pages = getCurrentPages(); //獲取所有頁(yè)面棧實(shí)例列表 let nowPage = pages[ pages.length - 1]; //當(dāng)前頁(yè)頁(yè)面實(shí)例 let prevPage = pages[ pages.length - 2 ]; //上一頁(yè)頁(yè)面實(shí)例 prevPage.$vm.couponNumber = value; //修改上一頁(yè)面的 couponNumber 參數(shù)值為 value prevPage.$vm.couid = vid; //修改上一頁(yè)面的 couid 參數(shù)值為 vid uni.navigateBack({ //uni.navigateTo跳轉(zhuǎn)的返回，默認(rèn)1為返回上一級(jí)delta: 1 });

uni-app 退出應(yīng)用

https://www.jianshu.com/p/9fa79c180a85

uview頭像裁剪 小程序端問(wèn)題

小程序uview頭像裁剪，存在一個(gè)問(wèn)題，如果跳轉(zhuǎn)時(shí)不傳參 將不會(huì)初始化成功cut對(duì)象 x/y/width/height的值分別為undefined 和 NAN
應(yīng)該把應(yīng)該在判斷option.rectWidth時(shí)先判斷有沒(méi)有值 沒(méi)有就使用初始值 所以加一句下面的代碼即可初始化成功：
option.rectWidth = option.rectWidth || this.rectWidth

onLoad(option) {let rectInfo = uni.getSystemInfoSync();this.width = rectInfo.windowWidth;this.height = rectInfo.windowHeight - this.bottomNavHeight;this.cropperOpt.width = this.width;this.cropperOpt.height = this.height;this.cropperOpt.pixelRatio = rectInfo.pixelRatio;if (option.destWidth) this.destWidth = option.destWidth;if (option.rectWidth) {option.rectWidth = option.rectWidth || this.rectWidth;let rectWidth = Number(option.rectWidth);this.cropperOpt.cut = {x: (this.width - rectWidth) / 2,y: (this.height - rectWidth) / 2,width: rectWidth,height: rectWidth};}

vuex部分

vuex頁(yè)面和組件獲取值的區(qū)別，其實(shí)算一種，只是兩種引用方式

頁(yè)面： import store from '@/store/index.js';//需要引入store store.state.username 組件： this.$store.state.username

vue部分

vue 寫入緩存 取出緩存 銷毀緩存

sessionStorage.setItem('huancun','寫入值');//存入緩存 sessionStorage.getItem("huancun");//讀取緩存 sessionStorage.removeItem("huancun");//清除緩存

elementUI 彈窗自適應(yīng)

<style> .el-dialog {margin-top: 9vh !important;margin-bottom: 8vh !important;overflow: auto; } </style>

嵌套table 子table獲取父table的列數(shù)據(jù)

props.row.status

綁定：class和：style的寫法

<!-- 1、普通的類名綁定 --><div :class="className">class綁定</div><!-- 2、對(duì)象綁定 --><div :class="{classNameA：true, classNameB：false}">class對(duì)象綁定</div><div :class="{classNameA：isActive}">class對(duì)象綁定</div><!-- 從prop或是computed中獲取 --><div :class="classObj">class對(duì)象綁定</div><!-- 從methods中獲取方法 --><div :class="getClassObj()">class對(duì)象綁定</div><!-- 1、直接綁定數(shù)組 --><div :class="[classNameA, classNameB]">class數(shù)組綁定</div><!-- 2、數(shù)組綁定,也可使用三元運(yùn)算符--><div :class="[classNameA, isActive ? classNameB : '']">class數(shù)組綁定</div><!-- 3、數(shù)組綁定,也可使用對(duì)象語(yǔ)法--><div :class="[classNameA, {classNameB：isActiv}]">class數(shù)組綁定</div><!-- style對(duì)象綁定 --><div :style="styleObj">style對(duì)象綁定</div><div :style="{color: 'red', fontSize: size + 'px'}">style對(duì)象綁定</div><!-- style數(shù)組綁定 --><div :style="[styleObjA, styleObjB]">style數(shù)組綁定</div>

javaScript部分

設(shè)置緩存

Web 存儲(chǔ) API 提供了 sessionStorage （會(huì)話存儲(chǔ)） 和 localStorage（本地存儲(chǔ)）兩個(gè)存儲(chǔ)對(duì)象來(lái)對(duì)網(wǎng)頁(yè)的數(shù)據(jù)進(jìn)行添加、刪除、修改、查詢操作
localStorage 用于長(zhǎng)久保存整個(gè)網(wǎng)站的數(shù)據(jù)，保存的數(shù)據(jù)沒(méi)有過(guò)期時(shí)間，直到手動(dòng)去除。
sessionStorage 用于臨時(shí)保存同一窗口(或標(biāo)簽頁(yè))的數(shù)據(jù)，在關(guān)閉窗口或標(biāo)簽頁(yè)之后將會(huì)刪除這些數(shù)據(jù)。

window.localStorage.setItem("存儲(chǔ)名","存儲(chǔ)值"); window.sessionStorage.setItem("存儲(chǔ)名","存儲(chǔ)值");

由于緩存的存儲(chǔ)值為字符串，需要將對(duì)象數(shù)組值轉(zhuǎn)換為字符串：JSON.stringify(存儲(chǔ)值)

window.localStorage.setItem("shopcatCookits",JSON.stringify(“存儲(chǔ)值”)); window.sessionStorage.setItem("shopcatCookits",JSON.stringify(“存儲(chǔ)值”));

獲取緩存

window.localStorage.getItem('緩存值') window.sessionStorage.getItem('緩存值')

擴(kuò)展運(yùn)算符…的用法

https://www.cnblogs.com/chorkiu/p/10444006.html

保留兩位小數(shù)

小數(shù).toFixed(2)

String 數(shù)組轉(zhuǎn) Int 數(shù)組

['1','2','3'].map(Number)

動(dòng)態(tài)獲取ID

$(eval("col_"+index)).addClass("activity");

漂亮的弧線

<div class="box"> <div class="home_top"> 這里是內(nèi)容 </div> </div> .box { width: 250px; margin: auto; overflow: hidden; } .home_top { position: relative; width: 100%; height: 100px; text-align: center; line-height: 50px; } .home_top:after { width: 140%; height: 100px; position: absolute; left: -20%; top: 0; z-index: -1; content: ''; border-radius: 0 0 50% 50%; background: linear-gradient(#2CBAF9, #04A9F4); }

uniapp的vconsole

控制臺(tái)
npm install vconsole

單頁(yè)面引入，或者main.js
import VConsole from ‘vconsole/dist/vconsole.min.js’ //import vconsole
let vConsole = new VConsole() // 初始化

unapp視頻獲取第一幀

<video :src="item.sp_url" :poster="" controls :show-center-play-btn="false" auto-pause-if-navigate></video> //圖片也可以用 <image class="zu_logo" :src="item.sp_url+ '?x-oss-process=video/snapshot,t_0,f_jpg'" mode=""></image>//只需要在地址后面加這一段代碼就可以了 '?x-oss-process=video/snapshot,t_0,f_jpg' //劃重點(diǎn)

頁(yè)面切換回地圖頁(yè)面組件

思路：由于地圖自主的Icon和客戶的樣式，只能通過(guò)label文字偏移到icon上面，然后點(diǎn)擊完了之后，icon會(huì)覆蓋到label文字上。解決：點(diǎn)擊完把所有的marker隱藏，再次顯示又循環(huán)添加上，缺點(diǎn)，點(diǎn)擊回來(lái)后地圖不是之前滑動(dòng)的位置了，需要重新滑動(dòng)。
解決思路：
緩存一個(gè)地圖信息的key，通過(guò)時(shí)間判斷，如果不超過(guò)1小時(shí)，就使用緩存的信息（接口需要的參數(shù)）獲取marker信息，直接調(diào)用接口，不執(zhí)行獲取定位然后才拿到經(jīng)緯度的方法。

onShow() {this.getMap(); } //獲取定位 getMap(){//計(jì)算時(shí)間相差var date = new Date();var year = date.getFullYear();var month = date.getMonth() + 1;var day = date.getDate();var hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();var minute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();var minute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds(); //秒 ,返回 Date 對(duì)象的秒數(shù) (0 ~ 59) this.time = year+'-'+month+'-'+day+' '+hour+':'+ minute+':'+seconds;console.log("time",this.time)if(uni.getStorageSync('map')){let map = uni.getStorageSync('map');var stime =date.getTime();var etime = new Date(map.createTime).getTime();var usedTime = stime - etime; //兩個(gè)時(shí)間戳相差的毫秒數(shù)//計(jì)算出小時(shí)數(shù)var leave1=usedTime%(24*3600*1000); //計(jì)算天數(shù)后剩余的毫秒數(shù)var hours=Math.floor(leave1/(3600*1000));if(hours >=1){//如果大于等于1個(gè)小時(shí)this.userMap();}else{// this.myMap();this.district = map.district;this.latitude = map.lat;this.longitude = map.lng;this.myLat = map.lat;this.myLong = map.lng;console.log(this.lng,this.lat,this.district)this.setList();}console.log('hours',hours) ;}else{this.userMap();} }, userMap(){let _t = this;uni.getLocation({type: 'gcj02',geocode:true,success: (res) => {debugger console.log("res",res)console.log('當(dāng)前位置的經(jīng)度 ：' + res.longitude);console.log('當(dāng)前位置的緯度：' + res.latitude);this.district = res.address.district;this.latitude = res.latitude;this.longitude = res.longitude;this.myLat = res.latitude; this.myLong = res.longitude;let data = {lng:res.longitude,lat:res.latitude,province:res.address.province,city:res.address.city,district:res.address.district,createTime:this.time}uni.setStorageSync('map',data);this.setList();},fail(res) {console.log(res)}}); }, ...

自定義組件使用this.$refs.del.open()沒(méi)有起效

解決方法：

this.$refs.del[0].open();

拆分詳細(xì)地址（省市區(qū)，包括自治區(qū)和北京市類似的省級(jí)）

var reg = /.+?(省|市|自治區(qū)|自治州|縣|區(qū))/g // 省市區(qū)的正則 console.log(詳細(xì)地址.match(reg)) // ['廣東省','廣州市','白云區(qū)']

APP和H5頁(yè)面跳轉(zhuǎn)外部訪問(wèn)頁(yè)面的方法

// #ifdef H5 window.open(href); // #endif // #ifdef APP-PLUS //第一種方法：跳轉(zhuǎn)外部打開(kāi) plus.runtime.openURL( href ); //第二種方法：APP內(nèi)直接下載uni.downloadFile({url: href,success: res => {if (res.statusCode === 200) {uni.openDocument({filePath: res.tempFilePath,// 如果文件名包含中文，建議使用escape(res.tempFilePath)轉(zhuǎn)碼，防止ios和安卓客戶端導(dǎo)致的差異success: function(res) {console.log('打開(kāi)文檔成功');},fail(err) {console.log(err);}});}}});// #endif

vue的request GET傳參數(shù)

使用類似的request方法，屬性為GET的時(shí)候，傳參

params:data得注意，GET傳參得特別注明賦值的位置參數(shù)，params //新 發(fā)電總，日排行榜 export function newsPlantNumLists(data) {console.log("api.data.數(shù)據(jù)--------",data)return request_user_api({url: 'ranking/queryPlantnUM',method: 'GET',params:data}) }POST //發(fā)電月排行榜 export function PlantNumListsMon(data) {return request({url: 'ranking/selectByYearAndMon',method: 'POST',data}) }

vue的過(guò)濾獲取單條匹配數(shù)據(jù)

let title = res.data.filter(item => {return item.id == this.$route.params.sid;});if(this.$route.params.sid){this.type_title = title[0].cate_name;}

vue數(shù)組切換某些屬性名

this.options = res.data.map(item=>{item.value = item.id;item.label = item.cate_name;});

vue 里面js文件跳轉(zhuǎn)路由的方法

import router from '@/router/index.js'router.push('/') router.back() 應(yīng)該是已經(jīng)會(huì)統(tǒng)一配置了。 那么直接在main.js導(dǎo)出根組件 api.js中引入import _this from '../main.js'; 然后請(qǐng)求里配置_this.$router.push('/login') 注意不要在api.js中導(dǎo)入后直接console.log(_this)，這個(gè)時(shí)候組件還沒(méi)創(chuàng)建肯定是undefined。

vue 路由跳轉(zhuǎn)到同一個(gè)頁(yè)面，參數(shù)不同，頁(yè)面刷新問(wèn)題

watch :{'$route': function (to, from) {this.loadData();}},

vue在頁(yè)面初次渲染時(shí)出現(xiàn)一閃而過(guò)的{{}}模板變量問(wèn)題

問(wèn)題：使用VUE時(shí)，頁(yè)面加載瞬間，會(huì)閃現(xiàn)模板語(yǔ)法，例如{undefined{user }}等

解決辦法：

1、可以通過(guò)在綁定模板變量的父元素添加VUE內(nèi)置的指令v-cloak解決這個(gè)問(wèn)題（推薦）
具體實(shí)現(xiàn)：

<div class="active_txt" v-cloak v-if="user!=''">{{user}} </div>

CSS中添加：

[v-cloak] {display: none; }

2、可以在需要編譯的元素前后加上

關(guān)于詳解
http://www.zhangxinxu.com/wordpress/2014/07/hello-html5-template-tag/

3、通過(guò)切換需要編譯元素的display屬性，最開(kāi)始設(shè)為none，請(qǐng)求完數(shù)據(jù)后設(shè)為block
4、VUE前置加載
5、使用組件，模板都寫在組件中，html 文件中僅插入組件標(biāo)簽
6、用個(gè)“l(fā)oading”的遮罩層，請(qǐng)求數(shù)據(jù)成功后再顯示

但是有的時(shí)候會(huì)不起作用，可能的原因有二：

一，v-cloak的display屬性被層級(jí)更高的給覆蓋掉了，所以要提高層級(jí)

[v-cloak] {display: none !important; }

這里使用了簡(jiǎn)單粗暴的方法加了個(gè)!important，有更好的方法歡迎留言。

二，樣式放在了@import引入的css文件中（傳統(tǒng)的開(kāi)發(fā)方式）
v-cloak的這個(gè)樣式放在@import 引入的css文件中不起作用，可以放在link引入的css文件里或者內(nèi)聯(lián)樣式中

基本的方法：
split(‘’):拆分
join(‘’);組合

const arr=[1,2,3,4,5,6,7,8]
//截取數(shù)組前三個(gè)元素
const sliceA=arr.slice(0,3)

//截取數(shù)組后三個(gè)元素 slice方法
const sliceArr=arr.slice(-3)
//截取數(shù)組后三個(gè)元素 splice方法
const spliceArr=arr.splice(-3,3)

var stmp = “rcinn.cn”;

使用一個(gè)參數(shù)
alert(stmp.slice(3));//從第4個(gè)字符開(kāi)始,截取到最后個(gè)字符;返回"nn.cn"

alert(stmp.substring(3));//從第4個(gè)字符開(kāi)始,截取到最后個(gè)字符;返回"nn.cn"

使用兩個(gè)參數(shù)
alert(stmp.slice(1,5))//從第2個(gè)字符開(kāi)始，到第5個(gè)字符；返回"cinn"

alert(stmp.substring(1,5));//從第2個(gè)字符開(kāi)始，到第5個(gè)字符；返回"cinn"

如果只用一個(gè)參數(shù)并且為0的話，那么返回整個(gè)參數(shù)
alert(stmp.slice(0));//返回整個(gè)字符串

alert(stmp.substring(0));//返回整個(gè)字符串

返回第一個(gè)字符
// 1.位位截取

alert(stmp.slice(0,1));//返回"r"

alert(stmp.substring(0,1));//返回"r"

常用方法

1、差分路徑和路徑參數(shù)

//根據(jù)路徑，拆分urlgetQuery(url){let index = url.indexOf('?')let obj = {}if (index === -1) return objlet queryStr = url.slice(index + 1)let arr = queryStr.split('&')for (let item of arr) {let keyValue = item.split('=')obj[keyValue[0]] = keyValue[1]}console.log("cans--------------",obj)return obj},

2、some():檢測(cè)數(shù)組中是否有元素大于0:

this.BooleanScore = this.tableDatas.some(item => {return item.headerstars <= 0 })

總結(jié)

以上是生活随笔為你收集整理的常用的但是容易忘记的css样式..........持续更新，主要自用的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。