用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索
  • TA的每日心情
    郁闷
    2017-6-29 17:34
  • 签到天数: 3 天

    [LV.2]偶尔看看I

    76

    主题

    104

    帖子

    10万

    金钱

    管理员

    Rank: 9Rank: 9Rank: 9

    积分
    0

    优秀版主

    2017-1-9 16:01:01 cyk 管理员 楼主 12180
    本帖最后由 cyk 于 2017-1-9 16:03 编辑

    微信小程序demo:出发地目的地选择,tab切换,锚点


    代码示例:
    [AppleScript] 纯文本查看 复制代码
    // pages/destination/destination.js
    var tempArr = [];
    Page({
      data:{
          winHeight: 0,
          winWidth:0,
          searchHeight:0,
          margin:0,
          currentIndex:0,
          citys:[],
          history:[],
          destinations:[
                      {"destination":"热门",
                      "id":"0"},
                      {"destination":"国内",
                      "id":"1"},
                      {"destination":"东南亚",
                      "id":"2" },
                      {"destination":"日韩",
                      "id":"3" },
                      {"destination":"海岛",
                      "id":"4" },
                      {"destination":"港澳台",
                      "id":"5" },
                      {"destination":"欧洲",
                      "id":"6" },
                      {"destination":"美洲",
                      "id":"7" },
                      {"destination":"澳洲",
                      "id":"8" },
                      {"destination":"中东非",
                      "id":"8" },
                       {"destination":"热门",
                      "id":"1" },
                      {"destination":"热门",
                      "id":"0"},
                      {"destination":"国内",
                      "id":"1"},
                      {"destination":"东南亚",
                      "id":"2" },
                      {"destination":"日韩",
                      "id":"3" },
                      {"destination":"海岛",
                      "id":"4" },
                      {"destination":"港澳台",
                      "id":"5" },
                      {"destination":"欧洲",
                      "id":"6" },
                      {"destination":"美洲",
                      "id":"7" },
                      {"destination":"澳洲",
                      "id":"8" },
                      {"destination":"中东非",
                      "id":"8" }
                      ],
     
            cityList:[
              [{"initial":"热门国际","items":["纽约","加拿大","泰国","韩国","日本","迪拜"]},{"initial":"热门国内","items":["北京","三亚","香港"]},{"initial":"热门国内","items":["北京","三亚","香港"]},{"initial":"热门国内","items":["北京","三亚","香港"]},{"initial":"热门国内","items":["北京","三亚","香港"]},{"initial":"热门国内","items":["北京","三亚","香港"]},{"initial":"热门国际","items":["纽约","加拿大","泰国","韩国","日本","迪拜"]},{"initial":"热门国际","items":["纽约","加拿大","泰国","韩国","日本","迪拜"]},{"initial":"热门国际","items":["纽约","加拿大","泰国","韩国","日本","迪拜"]},{"initial":"热门国际","items":["纽约","加拿大","泰国","韩国","日本","迪拜"]}],
        [{"initial":"","items":["北京","三亚","香港"]}],
         [{"initial":"","items":["泰国","新加坡","吉隆坡"]}],
         [{"initial":"","items":["韩国","日本","东京"]}],
         [{"initial":"","items":["济州岛","海盗","塞班"]}],     [{"initial":"","items":["澳门","台北","香港"]}],
            ]
      },
      // 点击事件
      switchTab:function(e){
        console.log(e);
        var id = e.currentTarget.dataset.id;
     
        // 造假数据,右侧的
        console.log(typeof id);
        var citys = this.data.cityList[id];
        this.setData({
          currentIndex:id,
          citys:citys
        });
      },
      cityClick:function(e){
        tempArr.splice(0,0,e.currentTarget.dataset.city);
        this.setData({
          history:this.historyUnique(tempArr),
        });
      },
      // 历史记录去重
      historyUnique:function(arr){
        var newArr = [];
        for(var i in arr){
          if(newArr.indexOf(arr[i])==-1){
            newArr.push(arr[i]);
          }
        }
        return newArr;
      },
      onLoad:function(options){
        // 页面初始化 options为页面跳转所带来的参数
         // 获取屏幕的高度
        var sysInfo = wx.getSystemInfoSync();
        var winHeight = sysInfo.windowHeight;
        var winWidth = sysInfo.windowWidth;
         // 先将rpx 转换为 px
        var searchH = Math.floor(164*(winWidth/750));
        var margin = Math.floor(20*(winWidth/750));
          // 造假数据,右侧的
        var citys = this.data.cityList[this.data.currentIndex];
        this.setData({
          winHeight:winHeight,
          winWidth:winWidth,
          searchHeight:searchH,
          margin:margin,
          citys:citys
        });
      },
      onReady:function(){
        // 页面渲染完成
      },
      onShow:function(){
        // 页面显示
      },
      onHide:function(){
        // 页面隐藏
      },
      onUnload:function(){
        // 页面关闭
      }
    })

    本帖子中包含更多资源

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

    x
    使用道具 举报 回复
    我有流量,你有产品,我们就可以合作,有意的个人开发者朋友可以联系微信号jim20180688,详聊
    发新帖
    您需要登录后才可以回帖 登录 | 立即注册
    咫尺论坛|小程序开发社区
    X

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

    还可领取小程序推广攻略