樣式 · 前端筆記

[TOC] ## 1像素線 ~~~ @mixin border-1px($color) { position: relative; &:after { display: block; position: absolute; left: 0; bottom: 0; width: 100%; border-top: 1px solid $color; content: ''; } } @media (-webkit-min-device-pixel-radio: 1.5), (min-device-pixel-radio: 1.5) { .border-1px { &::after { -webkit-transform: scaleY(.7); transform: scaleY(.7); } } } @media (-webkit-min-device-pixel-radio: 2), (min-device-pixel-radio: 2) { .border-1px { &::after { -webkit-transform: scaleY(.5); transform: scaleY(.5); } } } @mixin border-none { &:after { border: none; } } ~~~ 使用 ~~~ <li class="food-item border-1px"></li> .food-item { @include border-1px(rgba(7, 17, 27, 0.1)); } ~~~ ## 2倍圖、3倍圖 ~~~ @mixin bg-image($url) { background-image: url($url + '@2x.png'); @media (-webkit-min-device-pixel-ratio: 3), (-min-device-pixel-ratio: 3) { background-image: url($url + '@3x.png'); } } ~~~ ## 清除浮動 ~~~ .clearfix { display: inline-block; &:after { display: block; content: '.'; height: 0; line-height: 0; clear: both; visibility: hidden; } } ~~~ ## 模糊 ### backdrop-filter 只支持ios端；只作用于當前元素；適用場景： ![](https://box.kancloud.cn/6bc39f382ce9882f58186c95919eea04_325x572.png) 為背景添加模糊效果；如果目標元素內包裹著其他內容則應用filter屬性；（不支持安卓，效果不明顯） ### filter 兼容性比較好，不僅僅作用于當前元素，后代元素也會繼承這個屬性，**作用于一個空背景元素沒有效果** 適用場景： ![](https://box.kancloud.cn/44aac8a52b70d31f99f527829dd3ddfd_318x137.png) （效果其實還是通過作用于具體的img元素才實現模糊效果，如果單單作用于一個空元素背景則沒有效果） ## 左欄固定，右欄自適應 ~~~ <template> <div class="goods"> <div class="menu-wrapper" ref="menuWrapper"></div> <div class="foods-wrapper" ref="foodsWrapper"></div> </template> <style lang="scss"> .goods { display: flex; .menu-wrapper { flex: 0 0 80px; width: 80px; } .foods-wrapper { flex: 1; } } </style> ~~~ ## 左右滾動聯動 ~~~ <template> <div class="goods"> <div class="menu-wrapper" ref="menuWrapper"> <ul> <li v-for="(item, index) in goods" :class="{current: currentIndex === index}" @click="selectMenu(index, $event)"> </li> </ul> </div> <div class="foods-wrapper" ref="foodsWrapper"> <ul> <li v-for="item in goods" :key="item.id" class="food-list" ref="foodList"> <ul> <li v-for="food in item.foods" :key="food.id" class="food-item border-1px"></li> </ul> </li> </ul> </div> </div> </template> <script> data () { return { goods: [], listHeight: [], scrollY: 0 } }, computed: { // 獲取當前左欄tab index currentIndex () { for (let i = 0; i < this.listHeight.length; i++) { let height1 = this.listHeight[i] let height2 = this.listHeight[i + 1] if (!height2 || (this.scrollY >= height1 && this.scrollY < height2)) { return i } } return 0 } }, created () { // 獲取數據后初始化滾動插件、計算高度 this.$http.get('/api/goods').then((res) => { res = res.data if (res.errno === ERR_OK) { this.goods = res.data this.$nextTick(() => { this._initScroll() this._calculateHeight() }) } }) }, methods: { // 點擊左欄tab事件 selectMenu (index, event) { if (!event._constructed) { return } let foodList = this.$refs.foodList let el = foodList[index] this.foodsScroll.scrollToElement(el, 300) }, // 初始化左右BScroll，添加右欄滾動事件 _initScroll () { this.menuScroll = new BScroll(this.$refs.menuWrapper, { click: true }) this.foodsScroll = new BScroll(this.$refs.foodsWrapper, { click: true, probeType: 3 // 在滑動、momentum 滾動動畫運行過程派發 scroll 事件 }) this.foodsScroll.on('scroll', (pos) => { // 判斷滑動方向，避免下拉時分類高亮錯誤（如第一分類商品數量為1時，下拉使得第二分類高亮） if (pos.y <= 0) { this.scrollY = Math.abs(Math.round(pos.y)) } }) }, // 計算、存儲各個分類的scrollTop值到listHeight _calculateHeight () { let foodList = this.$refs.foodList let height = 0 this.listHeight.push(height) for (let i = 0; i < foodList.length; i++) { let item = foodList[i] height += item.clientHeight this.listHeight.push(height) } } } </script> ~~~ ## 從右到左飛入動畫 ~~~ <template> <transition name="move"> <div v-show="showFlag" class="food"></div> </transition> </template> <style lang="scss"> .food { transform: translate3d(0, 0, 0); &.move-enter-active, &.move-leave-active { transition: all 0.2 s linear; } &.move-enter, &.move-leave-active { transform: translate3d(100%, 0, 0) } } </style> ~~~ ## 設置容器寬高相等當padding使用百分百單位時，其計算是相對于寬度 ~~~ <template> <div class="image-header"> <img :src="food.image"> </div> </template> <style lang="scss"> .image-header { position: relative; width: 100%; height: 0; padding-top: 100%; img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } </style> ~~~ ## 子組件不能修改props屬性 Vue 2中子組件不能修改props屬性，需要通過$emit觸發父組件的方法來修改 ~~~ // 父組件 <ratingSelect @select="selectRating" @toggle="toggleContent" :selectType="selectType" :onlyContent="onlyContent" :desc="desc" :ratings="food.ratings"></ratingSelect> <script> const ALL = 2 export default { props: { food: { type: Object } }, data () { return { selectType: ALL, onlyContent: true, desc: { all: '全部', positive: '推薦', negative: '吐槽' } } }, methods: { selectRating (type) { this.selectType = type this.$nextTick(() => { this.scroll.refresh() }) }, toggleContent () { this.onlyContent = !this.onlyContent this.$nextTick(() => { this.scroll.refresh() }) } }, components: { cartcontrol, split, ratingSelect } } </script> // 子組件 <template> <div class="ratingselect"> <div class="rating-type border-1px"> <span @click="select(2,$event)" class="block positive" :class="{'active':selectType===2}"> {{desc.all}}<span class="count">{{ratings.length}}</span> </span> </div> <div @click="toggleContent" class="switch" :class="{'on':onlyContent}"> <span class="icon-check_circle"></span> <span class="text">只看有內容的評價</span> </div> </div> </template> <script> const POSITIVE = 0 const NEGATIVE = 1 const ALL = 2 export default { props: { ratings: { type: Array, default () { return [] } }, selectType: { type: Number, default: ALL }, onlyContent: { type: Boolean, default: false }, desc: { type: Object, default () { return { all: '全部', positive: '滿意', negative: '不滿意' } } } }, methods: { select (type, event) { this.$emit('select', type) }, toggleContent (event) { this.$emit('toggle') } } } </script> ~~~ ## 修改格式化時間戳 ~~~ export function formatDate (date, fmt) { if (/(y+)/.test(fmt)) { fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length)) } let o = { 'M+': date.getMonth() + 1, 'd+': date.getDate(), 'h+': date.getHours(), 'm+': date.getMinutes(), 's+': date.getSeconds() } for (let k in o) { if (new RegExp(`(${k})`).test(fmt)) { let str = o[k] + '' fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : padLeftZero(str)) } } return fmt } function padLeftZero (str) { return ('00' + str).substr(str.length) } ~~~