微信小程序開發(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;"="">

想了解更多微信小程序開發(fā)和微信小程序大全都可以進(jìn)入微信小程序商城系統(tǒng)開發(fā)了解。