利用swiper仿iphone時間設定滾輪控制項

2022-04-01 09:17:56 字數 2106 閱讀 3702

先貼一下實現之後的樣子：

可以上下滾動選擇，也可以點選選擇。

具體實現：

1.關於swiper的使用就不多說啦，去官網看下都能明白。

2.然後是初始化swiper，這才是重點

var swiper = new swiper('.swiper-container', );
初始完之後，就是對樣式的調整，為了達到以下的效果，我們需要調整樣式

我們可以利用這三個類，分別表示當前選中的slide的前乙個，當前的slide，接下來的slider

讓選中的slider的font-size變大，前後的slider變小，其他的slider變的更小

.swiper-slide .swiper-slide-active.swiper-slide-prev.swiper-slide-next
ok，這樣就有點樣子啦。然後是這兩條分割線。

我實現的思路是用定位，將乙個div定上去，因為swiper設定了居中的屬性，我們只要讓居中那個slider展示在這個div裡面就可以啦。

.active_line
不過要注意的一點是z-index的設定。

在專案實現的過程中，有一點也是讓我琢磨了一番，畢竟是引用swiper。當初始化的時候，整個html結構是必須存在的

<


div 


class


="outer"


>


<


div 


class


="swiper-container"


>


<


div 


class


>


<


div 


class


="swiper-slide"


>slide 1   背景


div>


<


div 


class


="swiper-slide"


>slide 2   北京


div>


<


div 


class


="swiper-slide"


>slide 3   上海


div>


<


div 


class


="swiper-slide"


>slide 4   你好


div>


<


div 


class


="swiper-slide"


>slide 5   城市


div>


<


div 


class


="swiper-slide"


>slide 6   深圳 


div>


<


div 


class


="swiper-slide"


>slide 7   廣州


div>


<


div 


class


="swiper-slide"


>slide 8   成都


div>


<


div 


class


="swiper-slide"


>slide 9


div>


<


div 


class


="swiper-slide"


>slide 10


div>


div>


div>


div>
如果是動態建立的slider節點，不可能是先初始化再完善html。所以一定要在dom建立並插入之後再進行初始化才能正常執行。

仿iphone原生的時鐘程式

還沒做完，時鐘部分做了一點，用的開源的時鐘。先截圖可能效果 採用的是標籤欄加導航欄的方式。關鍵的就那麼幾行 nsstring cellidentifer cell1 tableview registerclass uitableviewcell class forcellreuseidentifie...

iphone利用JSON傳遞資料

son不必多說了，在手機開發中，客戶端和伺服器端開發經常使用的資料互動模式。iphone中利用json傳遞的資料，可以非常容易的展示到各個容器中。下面是乙個最簡單的例子。效果如圖 上面用到了json傳遞的資料，有關json部分，iphone sdk雖然沒有支援，但是第三方已經寫好了。json 參考 ...

仿iPhone的日期時間選擇器

仿iphone的日期時間選擇器 可選只選擇日期，也可以同時選擇時間 只選擇日期的情況 同時選擇日期和時間的情況 關鍵 findviewbyid r.id.selectdatebutton setonclicklistener new onclicklistener catch parseexcept...