欧美三级国产三级日韩三级_亚洲熟妇丰满大屁股熟妇_欧美亚洲成人一区二区三区_国产精品久久久久久模特

關(guān)于微信小程序自定義Picker樣式的picker-view - 新聞資訊 - 云南小程序開發(fā)|云南軟件開發(fā)|云南網(wǎng)站建設(shè)-昆明葵宇信息科技有限公司

159-8711-8523

云南網(wǎng)建設(shè)/小程序開發(fā)/軟件開發(fā)

知識

不管是網(wǎng)站，軟件還是小程序，都要直接或間接能為您產(chǎn)生價值，我們在追求其視覺表現(xiàn)的同時，更側(cè)重于功能的便捷，營銷的便利，運(yùn)營的高效，讓網(wǎng)站成為營銷工具，讓軟件能切實(shí)提升企業(yè)內(nèi)部管理水平和效率。優(yōu)秀的程序為后期升級提供便捷的支持！

您當(dāng)前位置>首頁 » 新聞資訊 » 小程序相關(guān) >

關(guān)于微信小程序自定義Picker樣式的picker-view

發(fā)表時間：2020-9-23

發(fā)布人：葵宇科技

瀏覽次數(shù)：328

這里給大家介紹一下在開發(fā)微信小程序中使用到需要自定義樣式的picker（picker-view）的基本用法
在這里插入圖片描述
這里就是一個很簡單的自定義樣式的Picker。
下面貼出代碼

wxml：

<picker-view indicator-class='pickerCol' bindchange="bindChange" class="{{ pickerShow ? 'show' : '' }}">
    <view class='btns'>
      <view bindtap="closePicker">取消</view>
      <view bindtap="getValue">確認(rèn)</view>
    </view>
    <picker-view-column>
      <view wx:for="{{pickerArray}}" style="line-height: 50rpx" class="{{ pickerIndex === index ? 'pick-text' : '' }}">{{item}}</view>
    </picker-view-column>
  </picker-view>

wxss：

// 設(shè)置頭部的取消和確定按鈕
picker-view .btns {
  width: 100%;
  height: 100rpx;
  color: #baa076;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
}

picker-view .btns view {
  width: 20%;
  text-align: center;
  font-size: 32rpx;
}

picker-view {
  position: fixed;
  bottom: 0;
  left: 0;
  background-color: #FFF;
  text-align: center;
  box-sizing: border-box;
  width: 100%;
  height: 0;
  border-radius: 30rpx 30rpx 0 0;
  z-index: 999;
}

// 添加彈出的過渡動畫
picker-view.show {
  height: 36%;
  transition: all 0.4s;
}

// 設(shè)置單列數(shù)據(jù)的樣式
picker-view-column {
  border-radius: 30rpx 30rpx 0 0;
  color: #B8B8B8;
  font-size: 32rpx;
  margin-top: 47rpx;
}

// 設(shè)置選中框的樣式
.pickerCol {
  width: 100%;
  height: 50rpx;
  color: #baa076;
  border-top: 1px solid #f2f3f5;
  border-bottom: 1px solid #f2f3f5;
}

// 添加前面的三角形
.pickerCol::before {
  width: 10rpx; 
  height: 28rpx;
  position: absolute;
  left: 200rpx;
  top: 15rpx;
  background-image: url(//demo.17weiju.com/wxsh/wxsh/image/food-sjx.png);
  background-size: 100% 100%;
}

// 這里的兩個偽類有默認(rèn)樣式（兩條線），但是介于我已經(jīng)重寫了before，這里就取消after的顯示
.pickerCol::after {
  display: none;
}

// 自定義選中的時候字體顏色和大小
.pick-text {
  color: #baa076;
  font-size: 34rpx;
}

在使用這個picker-view組件時最主要的就是樣式問題，它不像picker能給你主動添加wxml的結(jié)構(gòu)，picker-view的結(jié)構(gòu)主要還是自己完成。

（js邏輯部分很簡單就不貼出來了，確實(shí)我太懶了）