小程式組件開發中的有關省市區三級連動的相關介紹
效果圖:
源碼
index.wxml
<import></import> <template></template>
#index.js
##
var city = require("../../utils/city.js"); Page({ data: {}, onLoad: function() { console.log('onLoad...'); var that = this; city.init(that); } });
address-temp.wxml
#
<?xml version="1.0" encoding="utf-8"?> <template name="addressPicker"> <view style="display:flex;margin:0;height:100%;align-items: center;justify-content: center"> <view style="width:100%;"> <picker bindchange="bindProvinceChange" value="{{provinceIndex}}" range="{{province}}"> <view style="text-align:center;padding:10rpx;font-size:0.8rem">{{province[provinceIndex]}}</view> </picker> </view> <view style="width:100%;"> <picker bindchange="bindCityChange" value="{{cityIndex}}" range="{{city}}"> <view style="text-align:center;padding:10rpx;font-size:0.8rem">{{city[cityIndex]}}</view> </picker> </view> <view style="width:100%;"> <picker bindchange="bindDistrictChange" value="{{districtIndex}}" range="{{district}}"> <view style="text-align:center;padding:10rpx;font-size:0.8rem">{{district[districtIndex]}}</view> </picker> </view> </view> </template>
city.js
var city = { province: ['-请选择-', '福建省'], city: { '-请选择-': ['-请选择-'], '福建省': ['福州市', '厦门市', '泉州市'] }, district: { '-请选择-': ['-请选择-'], '福州市': ['鼓楼区', '台江区'], '厦门市': ['湖里区', '集美区'], '泉州市': ['晋江市', '安溪县'] }, provinceIndex: 0, cityIndex: 0, districtIndex: 0, selectedProvince: '-请选择-', selectedCity: '-请选择-', selectedDistrct: '-请选择-' }; function init(that) { that.setData({ 'city': city }); var bindProvinceChange = function(e) { var city = that.data.city; that.setData({ 'city.provinceIndex': e.detail.value, 'city.selectedProvince': city.province[e.detail.value], 'city.selectedCity': city.city[city.province[e.detail.value]][0], 'city.selectedDistrct': city.district[city.city[city.province[e.detail.value]][0]][0], 'city.cityIndex': 0, 'city.districtIndex': 0 }); }; var bindCityChange = function(e) { var city = that.data.city; that.setData({ 'city.cityIndex': e.detail.value, 'city.selectedCity': city.city[city.selectedProvince][e.detail.value], 'city.districtIndex': 0, 'city.selectedDistrct': city.district[city.city[city.selectedProvince][e.detail.value]][0] }); }; var bindDistrictChange = function(e) { var city = that.data.city; that.setData({ 'city.districtIndex': e.detail.value, 'city.selectedDistrct': city.district[city.selectedCity][e.detail.value] }); }; that['bindProvinceChange'] = bindProvinceChange; that['bindCityChange'] = bindCityChange; that['bindDistrictChange'] = bindDistrictChange; } module.exports = { init: init }
以上是小程式組件開發中的有關省市區三級連動的相關介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章!

熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

AI Hentai Generator
免費產生 AI 無盡。

熱門文章

熱工具

記事本++7.3.1
好用且免費的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強大的PHP整合開發環境

Dreamweaver CS6
視覺化網頁開發工具

SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)

熱門話題

隨著行動互聯網技術和智慧型手機的普及,微信成為了人們生活中不可或缺的一個應用。而微信小程式則讓人們可以在不需要下載安裝應用程式的情況下,直接使用小程式來解決一些簡單的需求。本文將介紹如何使用Python來開發微信小程式。一、準備工作在使用Python開發微信小程式之前,需要先安裝相關的Python函式庫。這裡推薦使用wxpy和itchat這兩個函式庫。 wxpy是一個微信機器

小程式能用react,其使用方法:1、基於「react-reconciler」實作一個渲染器,產生一個DSL;2、建立一個小程式元件,去解析和渲染DSL;3、安裝npm,並執行開發者工具中的建構npm;4、在自己的頁面中引入包,再利用api即可完成開發。

實作微信小程式中的卡片翻轉特效在微信小程式中,實現卡片翻轉特效是一種常見的動畫效果,可以提升使用者體驗和介面互動的吸引力。以下將具體介紹如何在微信小程式中實現卡片翻轉的特效,並提供相關程式碼範例。首先,需要在小程式的頁面佈局檔案中定義兩個卡片元素,一個用於顯示正面內容,一個用於顯示背面內容,具體範例程式碼如下:<!--index.wxml-->&l

本站10月31日消息,今年5月27日,螞蟻集團宣布啟動“漢字拾光計劃”,最近又迎來新進展:支付寶上線“漢字拾光-生僻字”小程序,用於向社會徵集生僻字,補充生僻字庫,同時提供不同的生僻字輸入體驗,以幫助完善支付寶內的生僻字輸入方法。目前,用戶搜尋「漢字拾光」、「生僻字」等關鍵字就可以進入「生僻字」小程式。在小程式裡,使用者可以提交尚未被系統辨識輸入的生僻字圖片,支付寶工程師確認後,將會對字庫進行補錄入。本站注意到,使用者也可以在小程式體驗最新的拆字輸入法,這項輸入法針對讀音不明確的生僻字設計。用戶拆

uniapp如何實現小程式和H5的快速轉換,需要具體程式碼範例近年來,隨著行動網路的發展和智慧型手機的普及,小程式和H5成為了不可或缺的應用形式。而uniapp作為一個跨平台的開發框架,可以在一套程式碼的基礎上,快速實現小程式和H5的轉換,大大提高了開發效率。本文將介紹uniapp如何實現小程式和H5的快速轉換,並給出具體的程式碼範例。一、uniapp簡介unia

小程序備案操作步驟:1、準備個人身分證影本、企業營業執照影本、法人身分證影本等備案資料;2、登入小程式管理後台;3、進入小程式設定頁;4、選擇“基本設定」;5、填寫備案資料;6、上傳備案資料;7、提交備案申請;8、等待審核結果,如果備案不透過要根據原因進行修改,並重新提交備案申請;9、備案後續操作即可。

實現思路x01服務端的建立首先,在服務端,使用socket進行訊息的接受,每接受一個socket的請求,就開啟一個新的線程來管理訊息的分發與接受,同時,又存在一個handler來管理所有的線程,從而實現對聊天室的各種功能的處理x02客戶端的建立客戶端的建立就要比服務端簡單多了,客戶端的作用只是對消息的發送以及接受,以及按照特定的規則去輸入特定的字符從而實現不同的功能的使用,因此,在客戶端這裡,只需要去使用兩個線程,一個是專門用於接受消息,一個是專門用於發送消息的至於為什麼不用一個呢,那是因為,只

1.開啟微信小程序,進入對應的小程式頁面。 2.在小程式頁面中尋找會員相關入口,通常會員入口在底部導覽列或個人中心等位置。 3.點選會員入口,進入會員申請頁。 4、在會員申請頁面,填寫相關信息,如手機號碼、姓名等,完成資料填寫後,提交申請。 5.小程式方會對會員申請審核,審核通過後,用戶即可成為微信小程式會員。 6.作為會員,用戶將享有更多的會員權益,如積分、優惠券、會員專屬活動等
