MUI仿京東App位址選擇器

2021-09-14 07:17:09 字數 1225 閱讀 2958

才學js不久,剛好專案需要乙個京東位址選擇器,所以嘗試著寫了乙個,dom獲取較為複雜,純粹使用自己了解到的東西

依賴

//css是用rem寫的//mui提供的城市js
html

確定

位址

頁面內js

mui.init();

scrolly: true, //是否豎向滾動

bounce: true //是否啟用回彈

});var p = ''; //文字

var num = ''; //value值

var address = document.getelementbyid('address')

address.addeventlistener('tap',function())

function givevalue()

呼叫函式

function adds()else}}

// 賦值

givevalue();})}

css

ul,li

.mui-popover

.mui-slider-group

.mui-slider-item

.select-head

.select-head:after

.select-head ul

.select-head ul li

.select-head ul li.active

.select-head ul li.active:after

.select-head ul li:after

.select-head a

.select-con

margin: 0;

height: 4.42rem;

} padding: 0.1rem 0;

} padding: 0 0.26rem;

line-height: 0.58rem;

font-size: 0.186rem;

color: #333;

} color: #ce3d3a;

}

uniapp仿京東位址選擇外掛程式

匯入外掛程式之後,會在components下生成以下的檔案 然後只需要根據自己的需求改vue檔案即可,在所需的頁面寫以下的 content text area click btnclick title v if ishows 請選擇 title v if ishowstitle selectaddr...

MUI的時間選擇器

引入資源 全域性引入樣式 main.js引入 import static css mui.picker.min.css 引入js,html使用控制項 選擇日期 js var this this this.initmuinumbox this.initviewdata function else va...

vue 仿IOS 滾輪選擇器

先來個截圖 先來屢一下需求 1.移動端使用者手上下滑動,內容上下移動,使用者手離開數字按照慣性移動一段距離。2.當停止移動後,選中乙個文字並且文字高亮,上面的值會變成你選中的文字。3.可以連續滾動。說起滾動,不得不提css3的transform style preserve 3d 和backface...