原创 vue實現移動端不對稱商品圖

話不多說,直接上代碼: <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compati

原创 使用vue封裝的一個瀑布流圖片的組件

這裏我製作的瀑布留佈局圖片的思路是給每列圖片組一個float:left。 組件可以自己定義瀑布有幾列,總寬多少。 先看看效果圖(定義的4列,寬度爲父元素的80%): 父組件: <my-component-cascade-flow :p

原创 js中if語句爲空的條件

在進行if條件判斷的時候會遇到一些問題,那種條件爲true,那種條件爲false var a = null; if(a){ console.log("true") }else{ console.log("fal

原创 vue組件模板使用v-for無法渲染的問題

最近在做項目的過程中遇到一個問題,我們創建自己的組件時,父組件傳給子組件一個數組,子組件使用v-for指令無法渲染,以下是錯誤代碼: Vue.component('component-test',{ props: {

原创 微信小程序自定義組件---音頻組件

最近客戶要求,在原有的音頻功能上改動,使用戶能夠拖動進度條進行控制音頻進度。 效果如下: 下面是代碼: 父組件,wxml: <slider-audio audio-src="{{audioUrl}}"></slider-audio>

原创 微信小程序實現頂部導航欄漸變

在小程序開發的過程中,會遇到一些頁面上的要求,要求實現頂部導航欄的漸變如何實現,因爲小程序做了一些封裝,下面看看頁面的佈局圖: 如圖所示,實際上我們能夠操作的頁面只有中間那一塊,那麼,如果客戶需要使用頂部漸變怎麼處理呢?先看看效果圖:

原创 微信小程序自定義組件-自定義底部菜單欄(tabbar)

在做小程序開發的時候,客戶給出一個底部菜單欄的效果圖,要求中間的一個菜單呈圓形突出,也就是下面的效果: 小程序的原生的tabbar是不行了,我就自己寫了一個tabbar的組件。 前言: 目前還存在一些問題待完善,例如跳轉未加載過的頁面時

原创 微信小程序開發---使用IntersectionObserver實現懶加載

微信小程序提供了一個很好用的api,IntersectionObserver 對象,監聽目標元素與其祖先或視窗交叉狀態的手段。 其實現原理在於監聽目標元素與參照區域相交(參照區域可以爲頁面顯示區域、指定一個元素節點); 這裏實現懶加載的原

原创 微信小程序自定義組件開發---分頁組件

剛開始搞小程序,搞了一週後,可以開始寫組件了,寫個分頁組件練練手: 父組件,json文件引入: "usingComponents": { "paging": "../../components/paging/index" //引

原创 js try..catch的理解與使用

在使用js編程過程中,我們時常會遇到這種問題:你知道這個地方可能會出錯,但你又沒辦法避免,這個時候如何讓程序忽略這個錯誤繼續執行下面的命令呢,衆所周知,當js程序執行錯誤時,下面的程序就不會繼續執行下去了。 這個時候就需要用到try...

原创 微信小程序bug記錄

1、bug--開啓下拉刷新不能自動回彈 說明:微信小程序開啓下拉刷新後,開發者工具上可以自動回彈,android上不能回彈,基礎庫2.9.4 解決:在onPullDownRefresh監聽函數中動態關閉回彈,代碼: //index.js

原创 寫一個工具函數,指定位數的隨機字符串(開頭不爲數字)

閒來無事,寫個工具函數記錄一下: function randomStr(num){ const firstStr = 'abcdefghijklmnopqrstuvwxyz_'; const strLibrary = '

原创 vue解決移動端active僞類無效問題

這裏作者使用了vue的 @touchstart 和 @touchend 事件來實現了active僞類特效: 實現方法如下: .active{ background-color: rgba(0,0,0,0.5); } <a cl

原创 微信小程序自定義組件---標籤導航欄

閒着無聊,寫一個標籤式的導航欄,沒有使用微信小程序的scroll-view,感覺這玩意兒有點詭異,添加了scroll-x=“true”,也加了樣式父元素white-space:nowrap;子元素:display:inline-block

原创 微信小程序swiper切換特效

如果覺得微信小程序的切換太過生硬,可以看看下面我的方法: wxml: <swiper indicator-dots="true" autoplay="true" interval="{{interval}}" duration="{{d