实战

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

请教老师，我的筛选菜单点击子项没有反应

来源：

小阏呆

2017-03-08

请教老师，我的筛选菜单点击子选项显示对应的内容应该怎么做，好几天了没一点头绪。我没有用API接口，是纯本地的数据。


写回答

10回答

7七月

2017-03-08

直接说下具体问题是什么

0
3
小阏呆
回复
7七月
嗯呢，行呢，老师，我试试
2017-03-09
共3条回复

7七月

2017-03-08

这儿真得真机调试，而且我也不太熟悉你的业务。你能说下你的思路，和现在遇到的具体问题吗？

0
0

7七月

2017-03-08

不是，是这个网页的编辑器有个代码格式化，你直接贴文本，根本看不了代码，太长了。

0
1
小阏呆
弄好了，老师 快给看看吧 快疯了
2017-03-08
共1条回复

7七月

2017-03-08

格式化一下。。。编辑器不是有这个功能吗，代码格式化。我现在没环境，调不了代码

0
1
小阏呆
我格式化了，shift+alt+f; 还有按f1选择格式化代码，格完了 就是这个样子啊
2017-03-08
共1条回复

7七月

2017-03-08

同学，先把代码格式化一下，贴出来老师看看

0
1
小阏呆
老师，我直接把代码发给你了， 这边贴上来就乱了
2017-03-08
共1条回复

小阏呆

提问者

2017-03-08

var local_database = [
    {
        id: "music",
        image: "/images/post/crab.png",
        loc_name: "asd",
        category: "asdf",
        title: "音乐",
        time_str: "2016-12-11",
        address: "太原",
        price_range: "25.00",
    },
    {
        id: "music",
        image: "/images/post/crab.png",
        loc_name: "asd",
        category: "asdf",
        title: "音乐",
        time_str: "2016-12-11",
        address: "太原",
        price_range: "25.00",
    },
    {
        id: "film",
        image: "/images/post/crab.png",
        loc_name: "asd",
        category: "asdf",
        title: "电影",
        time_str: "2016-12-11",
        address: "太原",
        price_range: "25.00",
    },
    {
        id: "drama",
        image: "/images/post/crab.png",
        loc_name: "asd",
        category: "asdf",
        title: "喜剧",
        time_str: "2016-12-11",
        address: "太原",
        price_range: "25.00",
    },
    {
        id: "commonweal",
        image: "/images/post/crab.png",
        loc_name: "asd",
        category: "asdf",
        title: "公益",
        time_str: "2016-12-11",
        address: "太原",
        price_range: "25.00",
    },
],
    //初始化活动类型列表
    typeCategory = {
        "all": { "id": "all", "name": "all", "title": "全部" },
        "music": { "id": "music", "name": "music", "title": "音乐" },
        "film": { "id": "film", "name": "film", "title": "电影" },
        "drama": { "id": "drama", "name": "drama", "title": "戏剧 " },
        "commonweal": { "id": "commonweal", "name": "commonweal", "title": "公益" },
        "salon": { "id": "salon", "name": "salon", "title": "讲座 " },
        "exhibition": { "id": "exhibition", "name": "exhibition", "title": "展览" },
        "party": { "id": "party", "name": "party", "title": "聚会" },
        "sports": { "id": "sports", "name": "sports", "title": "运动" },
        "travel": { "id": "travel", "name": "travel", "title": "旅行" },
        "course": { "id": "course", "name": "course", "title": "课程" }
    };
// 初始化活动日期类型列表
var dateCategory = {
    "future": { "id": "future", "name": "future", "title": "全部" },
    "today": { "id": "today", "name": "today", "title": "今天" },
    "tomorrow": { "id": "tomorrow", "name": "tomorrow", "title": "明天" },
    "weekend": { "id": "weekend", "name": "weekend", "title": "周末" },
    "week": { "id": "week", "name": "week", "title": "近期" },
};
// 初始化活动地点类型列表
var districtCategory = {
    "all": { "id": "all", "name": "all", "title": "全部" },
    "taiyuan": { "id": "taiyuan", "name": "taiyuan", "title": "太原" },
    "yuncheng": { "id": "yuncheng", "name": "yuncheng", "title": "运城" },
    "linfen": { "id": "linfen", "name": "linfen", "title": "临汾" },
    "jinzhong": { "id": "jinzhong", "name": "jinzhong", "title": "晋中" },
};
module.exports = {
    indexList: local_database,
    typeCategoryList: typeCategory,
    dateCategoryList: dateCategory,
    districtCategoryList: districtCategory,
}


0
0

小阏呆

提问者

2017-03-08

var indexData = require('../../data/index_data.js');
var typeCategory = require('../../data/index_data.js');
var dateCategory = require('../../data/index_data.js');
var districtCategory = require('../../data/index_data.js');
var app = getApp();
Page({
  data: {
    showCategory: false,         // 是否显示类型选择列表
    isTypeTap: false,            // 类型标签页是否被点击
    isDateTap: false,            // 时间标签页是否被点击
    isDistrictTap: false,        // 地点标签页是否被点击
    events: {},                  // 活动列表
    g_eventCategory: {},         // 全局的类型信息
    dateCategory: {},            // 活动日期的信息：future, week, weekend, today, tomorrow
    typeCategory: {},            // 活动的类型信息：all,music, film, drama, commonweal, salon, exhibition, party, sports, travel, others
    districtCategory: {},        // 活动地点的信息：太原，运城，临汾，晋中
    eventCategory: {},           // 当前点击的标签页的类型列表信息
    "current": "",
    "type": "all",               // 当前选择的活动类型
    "date": "future",            // 当前选择的活动时间
    'district': "all",           // 当前选择的活动区域
  },
  onLoad: function () {
    this.setData({ typeCategory: indexData.typeCategoryList });
    this.setData({ dateCategory: indexData.dateCategoryList });
    this.setData({ districtCategory: indexData.districtCategoryList });
    // 请求活动列表
    this.getEventListData();
  },
  /** 重置标签页状态 */
  resetMenuTap: function (menu) {
    var readyData = { "isTypeTap": false, "isDateTap": false };
    this.setData(readyData);
  },
  //选择类型
  handleType: function (event) {
    this.setData({ "eventCategory": this.data.typeCategory, "current": this.data.type, "showCategory": true });
    this.resetMenuTap();
    this.setData({ "isTypeTap": true });
    console.log("handleType,活动被点击了");
  },
  //选择时间
  handleTime: function (event) {
    this.setData({ "eventCategory": this.data.dateCategory, "current": this.data.date, "showCategory": true });
    this.resetMenuTap();
    this.setData({ "isTypeTap": true });
    console.log("handleTime,时间被点击了");
  },
  //选择地点
  handleLoc: function (event) {
    this.setData({ "eventCategory": this.data.districtCategory, "current": this.data.district, "showCategory": true });
    this.resetMenuTap();
    this.setData({ "isTypeTap": true });
    console.log("handleLoc,地点被点击了");
  },
  //点击某个子类型
  handleCategory: function (event) {
    var id = event.currentTarget.dataset.id;
    var readyData = { "showCategory": false };
    this.data.isTypeTap && (readyData["type"] = id);
    this.data.isDateTap && (readyData["date"] = id);
    this.data.isDistrictTap && (readyData["districtTap"] = id);
    this.setData(readyData);
    // this.getEventListData();
    this.resetMenuTap();
    console.log("handleCategory,子项被点击了");
  },

  //点击类别外的区域，取消显示类别信息
  handleCoverTap: function (event) {
    this.setData({ "showCategory": false });
  },

  /** 搜索活动   */
  getEventListData: function () {
    // 显示加载中
    // wx.showToast({
    //   title: '加载中',
    //   icon: 'loading',
    //   duration: 10000
    // });

    var params = "?";
    this.data.locId && (params += "loc=" + this.data.locId);
    this.data.type && (params += "&&type=" + this.data.type);
    this.data.date && (params += "&&day_type=" + this.data.date);


    this.processEventListData();
  },

  /** 获取活动数据 */
  processEventListData: function (events) {
    var list = { events: indexData.indexList };

    // for(let i=0;i<list.length;i++){
    //   if("music"!=list[i].id){
    //     this.data.list.remove[i];
    //   }
    // }
    this.setData(list);
  },

})


0
0

小阏呆

提问者

2017-03-08

/* pages/location/category/category.wxss */

.container {
  background: #fff;
}

.session-header {
  position: fixed;
  z-index: 1;
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 70rpx;
  align-items: center;
  padding: 16rpx 0rpx 16rpx 0rpx;
  border-width: 1px 0px 1px 0px;
  border-color: #e6e6e6;
  border-style: solid;
  background: #fff;
  box-sizing: border-box;
}

.session-header .type-tab, .session-header .time-tab, .session-header .loc-tab {
  font-size: 24rpx;
  flex: 1;
  position: relative;
  text-align: center;
}

.session-header .tab-normal {
  color: #4a4a4a;
}

.session-header .tab-HL {
  color: #32cb32;
}

.session-header .type-tab, .session-header .time-tab, .session loc-tab {
  border-right: 1px solid #9e9e9e;
}

.session-header .type-tab::after, .session-header .time-tab::after,
.session-header .loc-tab::after {
  content: " ";
  position: absolute;
  width: 12rpx;
  height: 12rpx;
  top: 50%;
  left: calc(50% + 40rpx);
  margin-top: -12rpx;
  border-width: 1px 1px 0px 0px;
  transform: matrix(0.71, 0.71, 0.71, -0.71, 0, 0);
  border-style: solid;
  border-color: #9e9e9e;
}

.category-session {
  min-height: 100%;
  width: 100%;
  display: flex;
  position: fixed;
  margin-top: 72rpx;
  z-index: 1;
  flex-direction: column;
}

.category-session .category-cover {
  background: #ccc;
  flex-grow: 1;
  opacity: 0.3;
  width: 100%;
  height: 9999rpx;
}

.type-category-session {
  display: flex;
  flex-direction: row;
  padding: 20rpx 160rpx 20rpx 30rpx;
  flex-wrap: wrap;
  background: #fff;
}

.type-category-session .category {
  border: 1px solid #32cb32;
  background: #fff;
  color: #4a4a4a;
  border-radius: 30rpx;
  font-weight: 500;
  font-size: 24rpx;
  text-align: center;
  padding: 8rpx 26rpx 8rpx 26rpx;
  margin: 10rpx 30rpx 10rpx 0rpx;
  box-sizing: border-box;
}

.type-category-session .category-HL {
  background: #32cb32;
  color: #fff;
}

.event-session {
  margin-top: 70rpx;
}

.event-wrapper {
  display: block;
}

.event-content {
  display: flex;
  flex-direction: row;
  padding: 30rpx 30rpx 30rpx 30rpx;
  border-bottom: 1px solid #e6e6e6;
  width: 100%;
  box-sizing: border-box;
}

.event-content  .poster {
  width: 175rpx;
  height: 260rpx;
}

.event-content  .event-summary {
  display: flex;
  flex-direction: column;
  margin-left: 30rpx;
  overflow: hidden;
}

.type-wrapper {
  width: 100%;
  max-width: 540rpx;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.event-content .event-type, .event-content .distance {
  color: #4a4a4a;
  font-size: 22rpx;
  font-weight: 400;
  line-height: 1.5;
  max-width: 540rpx;
  white-space: pre-line;
  word-break: break-all;
}

.event-content .title {
  color: #4a4a4a;
  font-size: 28rpx;
  font-weight: 600;
  max-width: 540rpx;
  white-space: pre-line;
  word-break: break-all;
  line-height: 1.6;
  max-height: 90rpx;
}

.event-content .event-label {
  max-width: 540rpx;
  display: inline-block;
  font-size: 24rpx;
  font-weight: 600;
  color: #6e6e6e;
  line-height: 1.5;
}

.event-content .time, .event-content .location, .event-content .price {
  color: #4a4a4a;
  font-size: 24rpx;
  font-weight: 400;
  max-height: 72rpx;
  line-height: 1.5;
  white-space: pre-line;
  word-break: break-all;
}


0
0

小阏呆

提问者

2017-03-08

123

0
0

小阏呆

提问者

2017-03-08

<view class="container">
 <view class="session-header">
   <text class="type-tab {{type == 'all'?'tab-normal':'tab-HL'}}" bindtap="handleType">{{type == 'all'?'类型':typeCategory[type].title }}
   </text>
   <text class="time-tab {{date == 'future'?'tab-normal':'tab-HL'}}" bindtap="handleTime">{{date == 'future' ? '时间' : dateCategory[date].title}}
   </text>
   <text class="loc-tab {{district == 'all'?'tab-bormal':'tab-HL'}}" bindtap="handleLoc">{{district =='all'?'地点':locCategory[loc].title}}
   </text>
 </view>
 <view wx:if="{{showCategory}}" class="category-session">
   <view class="type-category-session">
     <block wx:for="{{eventCategory}}" wx:for-item="category" wx:key="{{category.id}}">
       <text class="category {{current == category.id ? 'category-HL': ''}}" catchtap="handleCategory" data-id="{{category.id}}" data-name="{{category.name}}" data-title="{{category.title}}">{{category.title}}
       </text>
     </block>
   </view>
   <view class="category-cover" bindtap="handleCoverTap"></view>
 </view>
 <view class="event-session">
   <block wx:for="{{events}}" wx:for-item="event">
     <view class="event-wrapper" bindtap="handleEventTap" data-id="{{event.id}}">
       <view class="event-content">
         <image class="poster" src="{{event.image}}"></image>
         <view class="event-summary">
           <view class="type-wrapper">
             <text class="event-type">{{g_eventCategory[event.category].title}}</text>
             <text wx:if="{{false}}" class="distance">4.25km</text>
           </view>
           <text class="title">{{event.title}}</text>
           <label class="event-label">时间:
             <text class="time">{{event.time_str}}</text>
           </label>
           <label class="event-label">地点:
             <text class="location">{{event.address}}</text>
           </label>
           <label class="event-label">费用:
             <text class="price">{{event.price_range}}</text>
           </label>
         </view>
       </view>
     </view>
   </block>
 </view>
</view>


0
0

微信小程序入门与实战（全新版） 超20000人学习的好课

4年同步微信官方迭代，累计20000+人学习， 比微信官方更火爆！

23867 学习 · 6899 问题

查看课程

相似问题

点击分享图标没反应，没报错

回答 4

多级菜单怎么做

回答 2

请教老师，点击导航没有反应，无法切换到对应的页面

回答 2

关于小程序分类菜单栏的联动问题

回答 3

老师如果我想获取marker点里面数组的数据应该怎么获取呢。我是个新手，js不太好

回答 4

打开慕课网App查看更多内容