用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索
  • TA的每日心情
    慵懒
    2017-1-6 10:46
  • 签到天数: 2 天

    [LV.1]初来乍到

    173

    主题

    181

    帖子

    981

    金钱

    咫尺尊享

    Rank: 5Rank: 5

    积分
    0
    2017-1-19 13:12:29 柿霖不是林 咫尺尊享 楼主 22549






    js:
    [JavaScript] 纯文本查看 复制代码
    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) {
        // 生命周期函数--监听页面加载
        var searchLetter = city.searchLetter;
        var cityList=city.cityList();
        // console.log(cityInfo);
     
        var sysInfo = wx.getSystemInfoSync();
        console.log(sysInfo);
        var winHeight = sysInfo.windowHeight;
     
        //添加要匹配的字母范围值
        //1、更加屏幕高度设置子元素的高度
        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 () {
        // 生命周期函数--监听页面初次渲染完成
     
      },
      onShow: function () {
        // 生命周期函数--监听页面显示
     
      },
      onHide: function () {
        // 生命周期函数--监听页面隐藏
     
      },
      onUnload: function () {
        // 生命周期函数--监听页面卸载
     
      },
      onPullDownRefresh: function () {
        // 页面相关事件处理函数--监听用户下拉动作
     
      },
      onReachBottom: function () {
        // 页面上拉触底事件的处理函数
     
      },
      onShareAppMessage: function () {
        // 用户点击右上角分享
        return {
          title: 'title', // 分享标题
          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){ //向上移动
            if(pageY<tHeight){
              // showLetter=this.mateLetter(pageY,this);
              this.nowLetter(pageY,this);
            }
        }else{//向下移动
            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) {//当前选中的信息
        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})
      }
    })



    WXML:
    [HTML] 纯文本查看 复制代码
    <view class="searchLetter touchClass">
        <view wx:for="{{searchLetter}}" style="height:{{itemH}}px" wx:key="index" data-letter="{{item.name}}" catchtouchstart="searchStart" catchtouchmove="searchMove" catchtouchend="searchEnd">{{item.name}}</view>
    </view>
     
    <block wx:if="{{isShowLetter}}">
    <view class="showSlectedLetter">
        {{showLetter}}
    </view>
    </block>
    <view>当前选择城市:{{city}}</view>
    <scroll-view scroll-y="true" style="height:{{winHeight}}px" bindscroll="bindScroll" scroll-top="{{scrollTop}}">
        <view class="selection" wx:for="{{cityList}}" wx:key="{{item.initial}}">
            <view class="item_letter">{{item.initial}}</view>
            <view class="item_city" wx:for="{{item.cityInfo}}" wx:for-item="ct" wx:key="{{ct.id}}" data-city="{{ct.city}}" bindtap="bindCity">
                  {{ct.city}} 
            </view>
        </view>
    </scroll-view>



    CSS:
    [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
    }



    游客,如果您要查看本帖隐藏内容请回复




    本帖子中包含更多资源

    您需要 登录 才可以下载或查看,没有帐号?立即注册

    x
    使用道具 举报 回复
    正需要,支持楼主大人了!
    感谢分享
    使用道具 举报 回复
    发新帖
    您需要登录后才可以回帖 登录 | 立即注册
    咫尺论坛|小程序开发社区
    X

    扫码添加专属客服即可随时咨询

    还可领取小程序推广攻略