国产无码综合区,色欲AV无码国产永久播放,无码天堂亚洲国产AV,国产日韩欧美女同一区二区

微信小程序 picker-view 組件構(gòu)建一個上下拖動選擇器

2年前作者：跟耿瑞卷出一片天分類：Toy博客閱讀(21)違法舉報

這篇具有很好參考價值的文章主要介紹了微信小程序 picker-view 組件構(gòu)建一個上下拖動選擇器。希望對大家有所幫助。如果存在錯誤或未考慮完全的地方，請大家不吝賜教，您也可以點擊"舉報違法"按鈕提交疑問。

picker-view是官方的一個選擇器組件
支持多級選擇當(dāng)然也可以單項選擇我們先來看看是個什么東西吧
簡單寫一個
wxml代碼

<view>
  <picker-view bindchange="pickerChange" style="width: 300rpx; height: 200rpx; font-size: 20px;">
    <!-- picker-view 的子組件 picker-view-column 表示選擇器的一列 -->
    <picker-view-column>
      <!-- picker-view-column 的子組件 picker-view-column-item 表示選擇器的一項 -->
      <picker-view-column-item>選項1</picker-view-column-item>
      <picker-view-column-item>選項2</picker-view-column-item>
      <picker-view-column-item>選項3</picker-view-column-item>
    </picker-view-column>
    <picker-view-column>
      <picker-view-column-item>選項A</picker-view-column-item>
      <picker-view-column-item>選項B</picker-view-column-item>
      <picker-view-column-item>選項C</picker-view-column-item>
    </picker-view-column>
  </picker-view>
</view>

js定義一個事件

Page({
  data: {
  },
  onLoad: function () {
  },
  pickerChange(e) {
    // 通過 e.detail.value 獲取選擇器當(dāng)前選中的索引值
    const value = e.detail.value;
    console.log("選擇器的值：", value);
  }
});

然后界面效果就是這樣的
微信小程序 picker-view 組件構(gòu)建一個上下拖動選擇器,javascript,前端,開發(fā)語言
我們可以鼠標(biāo)往上拖例如我們第二個選擇B

當(dāng)我們鼠標(biāo)拖動后松開那一刻 pickerChange就會觸發(fā)
他會給你一個數(shù)組里面就對應(yīng)你的子項那么第一個還停在第一項對應(yīng)下標(biāo)0 第二個被我們移動到了 B位置就是第二個元素 1下標(biāo)

然后這里我們可以通過wx:for 來循環(huán)多數(shù)據(jù)上去文章來源地址http://www.zghlxwxcb.cn/news/detail-720263.html

到了這里，關(guān)于微信小程序 picker-view 組件構(gòu)建一個上下拖動選擇器的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！

本文來自互聯(lián)網(wǎng)用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務(wù)，不擁有所有權(quán)，不承擔(dān)相關(guān)法律責(zé)任。如若轉(zhuǎn)載，請注明出處：如若內(nèi)容造成侵權(quán)/違法違規(guī)/事實不符，請點擊違法舉報進行投訴反饋，一經(jīng)查實，立即刪除！

分享到：

領(lǐng)支付寶紅包贊助服務(wù)器費用

【微信小程序】選擇器組件picker
picker組件是一種從底部向上彈起的滾動選擇器。在官方文檔中，有提供五種類型的picker組件，如普通選擇器，多列選擇器，時間選擇器，日期選擇器和省市區(qū)選擇器。（猜測是，這些選擇器時不同的且常用的某種類型，于是就產(chǎn)生固定的模版）。而在寫法上是這么寫滴，
2024年01月18日
瀏覽(38)
微信小程序picker組件的簡單使用單選
classData是接口請求的數(shù)組如果picker顯示的值是[object,object]這樣的?range-key=\\\"className\\\" range-key就是重點修改成你要顯示的字段
2024年02月12日
瀏覽(25)
微信小程序picker組件遇到的問題以及解決辦法
先來看一下官方文檔中picker的基本概念：從底部彈起的滾動選擇器，現(xiàn)支持三種選擇器，通過mode來區(qū)分，分別是普通選擇器，時間選擇器，日期選擇器，默認(rèn)是普通選擇器。重要屬性 range：選取范圍，數(shù)據(jù)類型為Array / Object Array，mode為普通選擇器時，range 有效； value：
2024年02月11日
瀏覽(30)
微信小程序picker組件–省市二級聯(lián)動及其回顯
1. 在wxml文件中添加picker組件 2. 在js文件中定義region變量，并在onLoad函數(shù)中初始化 3. 在onLoad函數(shù)中獲取用戶已選擇的省市區(qū)信息，并將其賦值給region變量 )
2024年02月08日
瀏覽(23)
【微信小程序】-- 表單組件 - picker 實現(xiàn)日期選擇器（五十三）
?? 所屬專欄：【微信小程序開發(fā)教程】 ?? 作??者：我是夜闌的狗?? ?? 個人簡介：一個正在努力學(xué)技術(shù)的CV工程師，專注基礎(chǔ)和實戰(zhàn)分享，歡迎咨詢！ ?? 歡迎大家：這里是CSDN，我總結(jié)知識的地方，喜歡的話請三連，有問題請私信 ?? ?? ?? ??大家好，又見面了，
2023年04月16日
瀏覽(21)
微信小程序做類似vue的級聯(lián)選擇功能，使用picker-view-column+checkbox-group完成
直接上圖主要代碼 #wxml ?picker-view?class=\\\"bj\\\"?indicator-style=\\\"height:?50px;\\\"??value=\\\"{ {value}}\\\"?bindchange=\\\"bindChange\\\" ??????picker-view-column ????????view?wx:for=\\\"{ {typeshool}}\\\"?bindtap=\\\"onclack\\\"?mark:id=\\\"{ {item.classifyId}}\\\"??wx:key=\\\"index\\\"?style=\\\"line-height:?50px;?text-align:?center;\\\"?checkbox-group?class=\\\"
2024年02月09日
瀏覽(46)
微信小程序 view組件的基本使用
能看圖就盡量減少文字提示，從圖書可以看出ABC是縱向排列的。為什么會縱向排列而不是橫向排列，那是因為view是塊元素，能占滿整一行。怎么讓view塊元素橫向并排呢？ ?向上圖一樣橫向排列，接下來教學(xué)從0開始高手看看即可，小白咱們是一條船上的，一起來學(xué)。 ?先打
2024年02月02日
瀏覽(99)
微信小程序 scroll-view組件的基本使用
?scroll-view 組件其實和view組件很像，結(jié)合上節(jié)課的內(nèi)容我們接著嘗試教大家一下這個組件怎么使用，現(xiàn)實中這個組件能實現(xiàn)的效果又有那些 ?上圖是CSDN的一個私聊窗口界面，我么看圖就能想象的到，左邊的聊天對像窗口是不是可以滾動的，這時候小程序就可以通過scroll-vie
2024年02月01日
瀏覽(88)
微信小程序中block和View組件的使用區(qū)別
在微信小程序中，block和View組件都是用于布局的組件，但它們在使用方式和功能上有一些區(qū)別。 1. Block組件： ? ?- Block組件是一個無實際顯示效果的組件，它主要用于包裹一組組件，并提供了類似于div的作用。 ? ?- 使用Block組件可以將一組組件進行分組，便于樣式的管理和
2024年02月04日
瀏覽(26)
微信小程序組件、web-view、h5之間交互
目錄結(jié)構(gòu) 小程序 /pages/index/index.wxml /pages/index/index.js /pages/index/index.json 組件 /component/index-page/index.wxml /component/index-page/index.js /component/index-page/index.json web-view /pages/web/web.wxml /pages/web/web.js h5
2023年04月16日
瀏覽(21)