微信小程序開發(fā)城市切換組件實(shí)戰(zhàn)教程
2017年6月13日,微信小程序城市切換已經(jīng)是當(dāng)下最熱門的話題,下面將從多方面來談?wù)勎⑿判〕绦蜷_發(fā)城市切換相關(guān)的內(nèi)容。
2017年6月13日微店發(fā)布最新公告,決定調(diào)整補(bǔ)貼策略:借記卡支付仍然免費(fèi)、提現(xiàn)仍然免費(fèi),對(duì)使用信用卡支付的交易收取1%的手續(xù)費(fèi)。微店方面表示,此舉是為了防范信用卡惡意套現(xiàn),新規(guī)將從2017年6月16日起實(shí)行。值得注意的是,這筆手續(xù)費(fèi)由賣家承擔(dān)。
2017年6月13日在618大促即將開啟之際,天貓于今天宣布“天貓出海”項(xiàng)目正式推出。天貓方面表示,“天貓出海”是以天貓作為主引擎,利用阿里巴巴核心電商板塊20億商品,將天貓生態(tài)模式逐步成功復(fù)制并落地到東南亞、印度以及全球市場(chǎng),提高當(dāng)?shù)仉娚绦剩?wù)海外消費(fèi)者。
微信小程序JS文件:
var city = require('../../utils/city.js'); Page({ data: { searchLetter: [], showLetter: "", winHeight: 0, tHeight:0, bHeight:0, startPageY:0, cityList:[], isShowLetter:false, scrollTop:0, city:"" }, onLoad: function (options) { // 生命周期函數(shù)--監(jiān)聽頁(yè)面加載 var searchLetter = city.searchLetter; var cityList=city.cityList(); // console.log(cityInfo); var sysInfo = wx.getSystemInfoSync(); console.log(sysInfo); var winHeight = sysInfo.windowHeight; //添加要匹配的字母范圍值 //1、更加屏幕高度設(shè)置子元素的高度 var itemH = winHeight / searchLetter.length; var tempObj = []; for (var i = 0; i < searchLetter.length; i++) { var temp = {}; temp.name = searchLetter[i]; temp.tHeight = i * itemH; temp.bHeight = (i + 1) * itemH; tempObj.push(temp) } this.setData({ winHeight: winHeight, itemH: itemH, searchLetter: tempObj, cityList:cityList }) console.log(this.data.cityInfo); }, onReady: function () { // 生命周期函數(shù)--監(jiān)聽頁(yè)面初次渲染完成 }, onShow: function () { // 生命周期函數(shù)--監(jiān)聽頁(yè)面顯示 }, onHide: function () { // 生命周期函數(shù)--監(jiān)聽頁(yè)面隱藏 }, onUnload: function () { // 生命周期函數(shù)--監(jiān)聽頁(yè)面卸載 }, onPullDownRefresh: function () { // 頁(yè)面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動(dòng)作 }, onReachBottom: function () { // 頁(yè)面上拉觸底事件的處理函數(shù) }, onShareAppMessage: function () { // 用戶點(diǎn)擊右上角分享 return { title: 'title', // 分享標(biāo)題 desc: 'desc', // 分享描述 path: 'path' // 分享路徑 } }, searchStart: function (e) { var showLetter = e.currentTarget.dataset.letter; var pageY = e.touches[0].pageY; this.setScrollTop(this,showLetter); this.nowLetter(pageY,this); this.setData({ showLetter: showLetter, startPageY: pageY, isShowLetter:true, }) }, searchMove: function (e) { var pageY = e.touches[0].pageY; var startPageY=this.data.startPageY; var tHeight=this.data.tHeight; var bHeight=this.data.bHeight; var showLetter = 0; console.log(pageY); if(startPageY-pageY>0){ //向上移動(dòng) if(pageY<tHeight){ // showLetter=this.mateLetter(pageY,this); this.nowLetter(pageY,this); } }else{//向下移動(dòng) if(pageY>bHeight){ // showLetter=this.mateLetter(pageY,this); this.nowLetter(pageY,this); } } }, searchEnd: function (e) { // console.log(e); // var showLetter=e.currentTarget.dataset.letter; var that=this; setTimeout(function(){ that.setData({ isShowLetter:false }) },1000) }, nowLetter: function (pageY, that) {//當(dāng)前選中的信息 var letterData = this.data.searchLetter; var bHeight = 0; var tHeight = 0; var showLetter=""; for (var i = 0; i < letterData.length; i++) { if (letterData[i].tHeight <= pageY && pageY<= letterData[i].bHeight) { bHeight = letterData[i].bHeight; tHeight = letterData[i].tHeight; showLetter = letterData[i].name; break; } } this.setScrollTop(that,showLetter); that.setData({ bHeight:bHeight, tHeight:tHeight, showLetter:showLetter, startPageY:pageY }) }, bindScroll:function(e){ console.log(e.detail) }, setScrollTop:function(that,showLetter){ var scrollTop=0; var cityList=that.data.cityList; var cityCount=0; var initialCount=0; for(var i=0;i<cityList.length;i++){ if(showLetter==cityList[i].initial){ scrollTop=initialCount*30+cityCount*41; break; }else{ initialCount++; cityCount+=cityList[i].cityInfo.length; } } that.setData({ scrollTop:scrollTop }) }, bindCity:function(e){ var city=e.currentTarget.dataset.city; this.setData({city:city}) } })
CSS文件:
.searchLetter{ position: fixed; right: 0; width: 40px; height: 100%; text-align: center; justify-content: center; display: flex; flex-direction: column; color: #666; z-index: 1 } .searchLetter view{ height: 70rpx; } .touchClass{ background-color: rgba(0, 0, 0,0.5); color: #fff; } .showSlectedLetter{ background-color: rgba(0, 0, 0,0.5); color: #fff; display: flex; justify-content: center; align-items: center; position: fixed; top:50%; left: 50%; margin: -50px; width: 100px; height: 100px; border-radius:10px; font-size: 26px; z-index: 1 } .selection{ display: flex; width: 100%; flex-direction: column; } .item_letter{ display: flex; background-color: #f8f8f8; height: 30px; padding-left: 10px; align-items: center; } .item_city{ display: flex; background-color: #fff; height: 40px; padding-left: 10px; align-items: center; border-bottom: 1px solid #f8f8f8 }
<span style="font-size:14px;font-family:" line-height:2;"="">
-
微信小程序商城系統(tǒng)開發(fā)其實(shí)很簡(jiǎn)單
微信小程序商城系統(tǒng)開發(fā)其實(shí)很簡(jiǎn)單,只需要五步就可以完成,整個(gè)過程包括開發(fā)、上線、發(fā)布都可以輕松搞定...詳情
-
微信小程序商城系統(tǒng)免費(fèi)注冊(cè)體驗(yàn)
微信小程序商城系統(tǒng)免費(fèi)注冊(cè)體驗(yàn),接下來是微信小程序的時(shí)代,這一波紅利在不抓住互聯(lián)網(wǎng)就再也沒什么機(jī)會(huì)了...詳情
想了解更多微信小程序開發(fā)和微信小程序大全都可以進(jìn)入微信小程序商城系統(tǒng)開發(fā)了解。
第二部分:如何開通一個(gè)小商店