Chinaunix首页 | 论坛 | 博客

拾忆1765207585的ChinaUnix博客

首页　| 　博文目录　| 　关于我

拾忆1765207585

  • 博客访问： 957099
  • 博文数量： 210
  • 博客积分： 0
  • 博客等级： 民兵
  • 技术积分： 2070
  • 用 户 组： 普通用户
  • 注册时间： 2014-11-19 21:54
文章分类

全部博文（210）

文章存档

2020年（2）

2019年（18）

2018年（27）

2017年（5）

2016年（53）

2015年（88）

2014年（17）

我的朋友
最近访客
推荐博文
相关博文
微信小程序通讯录

分类： 其他平台

2019-02-15 18:19:52


点击(此处)折叠或打开

  1. <view >
  2. <!-- 左侧列表内容部分 -->
  3.   <scroll-view class="content" enable-back-to-top scroll-into-view="{{toView}}" scroll-y="true" scroll-with-animation="true" bindscroll="onPageScroll">
  4.     <view wx:for="{{listMain}}" wx:for-item="group" wx:key="{{group.id}}" id="{{ 'inToView'+group.id}}" data-id='{{group.id}}'>
  5.       <view class="address_top" >{{group.region}}</view>
  6.         <view wx:for="{{group.items}}" wx:for-item="item" wx:key="{{item.brandId}}">
  7.           <view class="address_bottom" data-id='{{group.id}}'>{{item.name}}</view>
  8.         </view>
  9.     </view>
  10.   </scroll-view>
  11.   <!-- 顶部固定分类 -->
  12.   <view class="list-fixed {{fixedTitle=='' ? 'hide':''}}" style="transform:translate3d(0,{{fixedTop}}px,0);">
  13.     <view class="fixed-title">
  14.     {{fixedTitle}}
  15.     </view>
  16.   </view>
  17.   <!-- 右侧字母导航 -->
  18.   <view class="orientation_region">
  19.     <view class="orientation">#</view>
  20.       <block wx:for="{{listMain}}" wx:key="{{item.id}}">
  21.         <view class="orientation_city {{isActive==item.id ? 'active':'' }}" bindtap="scrollToViewFn" data-id="{{item.id}}" >
  22.         {{item.region}}
  23.         </view>
  24.     </block>
  25.   </view>
  26. </view>


点击(此处)折叠或打开

  1. // pages/address_list/address_list.js
  2. var address_list = require("../../utils/address_list.js");
  3. Page({

  5.   /**
  6.    * 页面的初始数据
  7.    */
  8.   data: {
  9.     isActive: null,
  10.     listMain: [],
  11.     listTitles: [],
  12.     fixedTitle: null,
  13.     toView: 'inToView0',
  14.     oHeight: [],
  15.     scroolHeight: 0,
  16.   },


  19.   /**
  20.    * 生命周期函数--监听页面加载
  21.    */
  22.   onLoad: function (options) {
  23.     var that = this;
  24.     that.getBrands();
  25.     

  27.     
  28.   },

  30.   /**
  31.    * 生命周期函数--监听页面初次渲染完成
  32.    */
  33.   onReady: function () {

  35.   },

  37.   /**
  38.    * 生命周期函数--监听页面显示
  39.    */
  40.   onShow: function () {

  42.   },

  44.   /**
  45.    * 生命周期函数--监听页面隐藏
  46.    */
  47.   onHide: function () {

  49.   },

  51.   /**
  52.    * 生命周期函数--监听页面卸载
  53.    */
  54.   onUnload: function () {

  56.   },

  58.   /**
  59.    * 页面相关事件处理函数--监听用户下拉动作
  60.    */
  61.   onPullDownRefresh: function () {

  63.   },

  65.   /**
  66.    * 页面上拉触底事件的处理函数
  67.    */
  68.   onReachBottom: function () {

  70.   },

  72.   /**
  73.    * 用户点击右上角分享
  74.    */
  75.   onShareAppMessage: function () {

  77.   },



  81.   //点击右侧字母导航定位触发
  82.   scrollToViewFn: function (e) {
  83.     var that = this;
  84.     var _id = e.target.dataset.id;
  85.     for (var i = 0; i < that.data.listMain.length; ++i) {
  86.       if (that.data.listMain[i].id === _id) {
  87.         that.setData({
  88.           isActive: _id,
  89.           toView: 'inToView' + _id,
  90.           fixedTitle: that.data.listMain[i].region
  91.          
  92.         })
  93.         break
  94.       }
  95.     }
  96.   },
  97.   toBottom: function (e) {
  98.     console.log(e)
  99.   },
  100.   // 页面滑动时触发
  101.   onPageScroll: function (e) {
  102.     this.setData({
  103.       scroolHeight: e.detail.scrollTop
  104.     });
  105.     for (let i in this.data.oHeight) {
  106.       if (e.detail.scrollTop < this.data.oHeight[i].height) {
  107.         this.setData({
  108.           isActive: this.data.oHeight[i].key,
  109.           fixedTitle: this.data.oHeight[i].name
  110.         });
  111.         return false;
  112.       }
  113.     }

  115.   },
  116.   // 处理数据格式，及获取分组高度
  117.   getBrands: function () {
  118.     var that = this;
  119.     var someTtitle = null;
  120.     that.setData({
  121.       listMain: address_list.address_list,
  122.       fixedTitle: address_list.address_list[0].region
  123.     })
  124.     var number = 0;
  125.     
  126.     for (let i = 0; i < that.data.listMain.length; ++i) {
  127.       wx.createSelectorQuery().select('#inToView'+that.data.listMain[i].id).
  128.         boundingClientRect(function (rect) {
  129.           number = rect.height + number;
  130.           var newArry = [{ 'height': number, 'key': rect.dataset.id, "name": that.data.listMain[i].region }]
  131.           that.setData({
  132.             oHeight: that.data.oHeight.concat(newArry)
  133.           })

  135.         }).exec();
  136.     };
  137.   },

  139. })


点击(此处)折叠或打开

  1. /* pages/address_list/address_list.wxss */
  2. /* pages/list/list.wxss */
  3. page{ height: 100%;}
  4. .content{padding-bottom: 20rpx; box-sizing: border-box; height: 100%;position: fixed}
  5. .location{width: 100%;}
  6. .location_top{height: 76rpx;line-height: 76rpx; background: #f4f4f4;color: #606660;font-size: 28rpx;padding: 0 20rpx;}
  7. .location_bottom{height: 140rpx;line-height: 140rpx;color: #d91f16;font-size: 28rpx;border-top: 2rpx #ebebeb solid; border-bottom: 2rpx #ebebeb solid;padding: 0 20rpx; align-items: center;display: -webkit-flex;}
  8. .address_top{height: 56rpx;line-height: 56rpx; background: #EBEBEB;color: #999999;font-size: 28rpx;padding: 0 20rpx;}
  9. .address_bottom{height: 88rpx;line-height: 88rpx; background: #fff;color: #000000;font-size: 28rpx;padding: 0 20rpx; border-bottom: 2rpx #ebebeb solid;margin-left: 15rpx; }
  10. .location_img{width: 48rpx;height: 48rpx;position: absolute;right: 20rpx;top: 125rpx;}
  11. .add_city{width: 228rpx;height: 60rpx;line-height: 60rpx; text-align: center; border: 2rpx solid #ebebeb; color: #000000;margin-right: 20rpx; }
  12. .add_citying{width: 228rpx;height: 60rpx;line-height: 60rpx; text-align: center; border: 2rpx solid #09bb07; color: #09bb07;margin-right: 20rpx;}
  13. .orientation{white-space:normal;display: inline-block; width: 45rpx;height:50rpx;font-size: 28rpx;font-weight: bold; color: rgb(88, 87, 87); text-align: center;}
  14. .orientation_region{padding: 5px 0px; width: 45rpx;font-size: 20rpx;position: fixed;top: 50%;right: 6rpx;transform:translate(0,-50%);background: rgb(199, 198, 198);border-radius: 10px}
  15. .orientation_city{height: 40rpx; line-height: 40rpx;color: #000;text-align: center;}
  16. .active{color: #2cc1d1;}
  17. .list-fixed{position: fixed;width: 100%;z-index: 999; height: 56rpx;line-height: 56rpx; background: #EBEBEB;color: #999999;font-size: 28rpx;padding: 0 20rpx;z-index: 9999;}
  18. .fixed-title{color:#2cc1d1}


点击(此处)折叠或打开

  1. var address_list = [
  2.   {
  3.     id: "1", region: "A",
  4.     items: [
  5.       { id: "..", name: "阿明A" },
  6.       { id: "..", name: "奥特曼A" },
  7.       { id: "..", name: "安庆A" },
  8.       { id: "..", name: "阿曼A" }
  9.     ]
  10.   },
  11.   {
  12.     id: "2", region: "B",
  13.     items: [
  14.       { id: "..", name: "爸爸B" },
  15.       { id: "..", name: "北京B" }
  16.     ]
  17.   },
  18.   {
  19.     id: "3", region: "C",
  20.     items: [
  21.       { id: "..", name: "爸爸C" },
  22.       { id: "..", name: "北京C" }
  23.     ]
  24.   },
  25.   {
  26.     id: "4", region: "D",
  27.     items: [
  28.       { id: "..", name: "爸爸D" },
  29.       { id: "..", name: "北京D" }
  30.     ]
  31.   },
  32.   {
  33.     id: "5", region: "E",
  34.     items: [
  35.       { id: "..", name: "爸爸D" },
  36.       { id: "..", name: "北京D" }
  37.     ]
  38.   },
  39.   {
  40.     id: "6", region: "F",
  41.     items: [
  42.       { id: "..", name: "爸爸F" },
  43.       { id: "..", name: "北京F" }
  44.     ]
  45.   },
  46.   {
  47.     id: "7", region: "G",
  48.     items: [
  49.       { id: "..", name: "爸爸G" },
  50.       { id: "..", name: "北京G" }
  51.     ]
  52.   },
  53.   {
  54.     id: "8", region: "H",
  55.     items: [
  56.       { id: "..", name: "爸爸H" },
  57.       { id: "..", name: "北京H" }
  58.     ]
  59.   },
  60.    {
  61.     id: "9", region: "I",
  62.     items: [
  63.       { id: "..", name: "爸爸I" },
  64.       { id: "..", name: "北京I" }
  65.     ]
  66.   },

  68.   {
  69.     id: "10", region: "J",
  70.     items: [
  71.       { id: "..", name: "爸爸J" },
  72.       { id: "..", name: "北京J" }
  73.     ]
  74.   },
  75.   {
  76.     id: "11", region: "K",
  77.     items: [
  78.       { id: "..", name: "阿明K" },
  79.       { id: "..", name: "奥特曼K" },
  80.       { id: "..", name: "安庆K" },
  81.       { id: "..", name: "阿曼K" }
  82.     ]
  83.   },
  84.   {
  85.     id: "12", region: "L",
  86.     items: [
  87.       { id: "..", name: "爸爸L" },
  88.       { id: "..", name: "北京L" }
  89.     ]
  90.   },
  91.   {
  92.     id: "13", region: "M",
  93.     items: [
  94.       { id: "..", name: "爸爸M" },
  95.       { id: "..", name: "北京M" }
  96.     ]
  97.   },
  98.   {
  99.     id: "14", region: "N",
  100.     items: [
  101.       { id: "..", name: "爸爸N" },
  102.       { id: "..", name: "北京N" }
  103.     ]
  104.   },
  105.   {
  106.     id: "15", region: "O",
  107.     items: [
  108.       { id: "..", name: "爸爸O" },
  109.       { id: "..", name: "北京O" }
  110.     ]
  111.   },
  112.   {
  113.     id: "16", region: "P",
  114.     items: [
  115.       { id: "..", name: "爸爸P" },
  116.       { id: "..", name: "北京P" }
  117.     ]
  118.   },
  119.   {
  120.     id: "17", region: "Q",
  121.     items: [
  122.       { id: "..", name: "爸爸Q" },
  123.       { id: "..", name: "北京Q" }
  124.     ]
  125.   },
  126.   {
  127.     id: "18", region: "R",
  128.     items: [
  129.       { id: "..", name: "爸爸R" },
  130.       { id: "..", name: "北京R" }
  131.     ]
  132.   },
  133.   {
  134.     id: "19", region: "S",
  135.     items: [
  136.       { id: "..", name: "爸爸S" },
  137.       { id: "..", name: "北京S" }
  138.     ]
  139.   },

  141.   {
  142.     id: "20", region: "T",
  143.     items: [
  144.       { id: "..", name: "爸爸T" },
  145.       { id: "..", name: "北京T" }
  146.     ]
  147.   }, {
  148.     id: "21", region: "U",
  149.     items: [
  150.       { id: "..", name: "阿明U" },
  151.       { id: "..", name: "奥特曼U" },
  152.       { id: "..", name: "安庆U" },
  153.       { id: "..", name: "阿曼U" }
  154.     ]
  155.   },
  156.   {
  157.     id: "22", region: "V",
  158.     items: [
  159.       { id: "..", name: "爸爸V" },
  160.       { id: "..", name: "北京V" }
  161.     ]
  162.   },
  163.   {
  164.     id: "23", region: "W",
  165.     items: [
  166.       { id: "..", name: "爸爸W" },
  167.       { id: "..", name: "北京W" }
  168.     ]
  169.   },
  170.   {
  171.     id: "24", region: "X",
  172.     items: [
  173.       { id: "..", name: "爸爸X" },
  174.       { id: "..", name: "北京X" }
  175.     ]
  176.   },
  177.   {
  178.     id: "25", region: "Y",
  179.     items: [
  180.       { id: "..", name: "爸爸Y" },
  181.       { id: "..", name: "北京Y" }
  182.     ]
  183.   },
  184.   {
  185.     id: "26", region: "Z",
  186.     items: [
  187.       { id: "..", name: "爸爸Z" },
  188.       { id: "..", name: "北京Z" }
  189.     ]
  190.   },
  191.   
  192. ];

  194. module.exports={
  195.   address_list: address_list
  196. }

阅读(1985) | 评论(0) | 转发(0) |
0

上一篇：封装Flex 布局库

下一篇：JS中的let和var的区别

给主人留下些什么吧！~~
关于我们 | 关于IT168 | 联系方式 | 广告合作 | 法律声明 | 免费注册

Copyright 2001-2010 ChinaUnix.net All Rights Reserved 北京皓辰网域网络信息技术有限公司. 版权所有

感谢所有关心和支持过ChinaUnix的朋友们

16024965号-6