Chinaunix首页 | 论坛 | 博客
  • 博客访问: 564999
  • 博文数量: 208
  • 博客积分: 0
  • 博客等级: 民兵
  • 技术积分: 2049
  • 用 户 组: 普通用户
  • 注册时间: 2014-11-19 21:54
文章分类

全部博文(208)

文章存档

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({

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


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

  23.     
  24.   },

  25.   /**
  26.    * 生命周期函数--监听页面初次渲染完成
  27.    */
  28.   onReady: function () {

  29.   },

  30.   /**
  31.    * 生命周期函数--监听页面显示
  32.    */
  33.   onShow: function () {

  34.   },

  35.   /**
  36.    * 生命周期函数--监听页面隐藏
  37.    */
  38.   onHide: function () {

  39.   },

  40.   /**
  41.    * 生命周期函数--监听页面卸载
  42.    */
  43.   onUnload: function () {

  44.   },

  45.   /**
  46.    * 页面相关事件处理函数--监听用户下拉动作
  47.    */
  48.   onPullDownRefresh: function () {

  49.   },

  50.   /**
  51.    * 页面上拉触底事件的处理函数
  52.    */
  53.   onReachBottom: function () {

  54.   },

  55.   /**
  56.    * 用户点击右上角分享
  57.    */
  58.   onShareAppMessage: function () {

  59.   },



  60.   //点击右侧字母导航定位触发
  61.   scrollToViewFn: function (e) {
  62.     var that = this;
  63.     var _id = e.target.dataset.id;
  64.     for (var i = 0; i < that.data.listMain.length; ++i) {
  65.       if (that.data.listMain[i].id === _id) {
  66.         that.setData({
  67.           isActive: _id,
  68.           toView: 'inToView' + _id,
  69.           fixedTitle: that.data.listMain[i].region
  70.          
  71.         })
  72.         break
  73.       }
  74.     }
  75.   },
  76.   toBottom: function (e) {
  77.     console.log(e)
  78.   },
  79.   // 页面滑动时触发
  80.   onPageScroll: function (e) {
  81.     this.setData({
  82.       scroolHeight: e.detail.scrollTop
  83.     });
  84.     for (let i in this.data.oHeight) {
  85.       if (e.detail.scrollTop < this.data.oHeight[i].height) {
  86.         this.setData({
  87.           isActive: this.data.oHeight[i].key,
  88.           fixedTitle: this.data.oHeight[i].name
  89.         });
  90.         return false;
  91.       }
  92.     }

  93.   },
  94.   // 处理数据格式,及获取分组高度
  95.   getBrands: function () {
  96.     var that = this;
  97.     var someTtitle = null;
  98.     that.setData({
  99.       listMain: address_list.address_list,
  100.       fixedTitle: address_list.address_list[0].region
  101.     })
  102.     var number = 0;
  103.     
  104.     for (let i = 0; i < that.data.listMain.length; ++i) {
  105.       wx.createSelectorQuery().select('#inToView'+that.data.listMain[i].id).
  106.         boundingClientRect(function (rect) {
  107.           number = rect.height + number;
  108.           var newArry = [{ 'height': number, 'key': rect.dataset.id, "name": that.data.listMain[i].region }]
  109.           that.setData({
  110.             oHeight: that.data.oHeight.concat(newArry)
  111.           })

  112.         }).exec();
  113.     };
  114.   },

  115. })


点击(此处)折叠或打开

  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.   },

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

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

  191. module.exports={
  192.   address_list: address_list
  193. }

阅读(774) | 评论(0) | 转发(0) |
给主人留下些什么吧!~~
评论热议
请登录后评论。

登录 注册