微信小程序学习笔记(五):swiper

  <view class="content">
      <view class='left'>//获取省份名称
      <block wx:for="{{data_1}}" wx:for-item="item">
        <view class="{{flag=='item.id'?'select':'normal'}}" id='{{item.id}}' bindtap='switchNav'>{{item.place}}</view></block>
    </view>
      <view class='right'>//详细内容
        <view class='category'>
          <swiper current='0'style="height:700px" vertical="{{true}}">
          <block wx:for="{{thing}}"wx:for-item='item' wx:key="{{item.id}}">
          <view><text>{{item.name}}</text></view>
            <swiper-item>
            </swiper-item>
            </block>
          </swiper>
        </view>
      </view>
    </view>
var localData = require('../data/json.js')//加载本地数据
Page({
  data: {
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
  this.setData({
    data: localData.textjson,
    data_1:localData.placejson,
    data_2:localData.alljson
  })
  },
  switchNav: function (e) {
    var array = new Array();
    var page = this;
    var a=0;
    var ff=false;
    var id = e.target.id;
    console.log(this.data.currentTab+'\\'+id)
    if (this.data.currentTab == id) {//id与当前id相同则不在重新加载数据
      return false;
    } else {
      wx.showLoading({
        title: '数据加载中。。。',
      })
      for (var i in localData.alljson) {
        if (localData.alljson[i]['id']==id){
          array[a] = localData.alljson[i]//数据添加到数组中
          a+=1;
        }else{
        }
      }
      ff=true;
      //传至wxml前端
      page.setData({
        thing: array
      })
      page.setData({
        currentTab: id
      });
    }
    page.setData({
      flag: id
    });
    if(ff==true){
      wx.hideLoading();
    }  
  },
  catchTouchMove: function (res) {
    return false
  }
})

在这里插入图片描述

发布了71 篇原创文章 · 获赞 204 · 访问量 4万+

猜你喜欢

转载自blog.csdn.net/qq_44198436/article/details/105001195