微信小程序_switchnav函数

今天唠唠第一个写的微信小程序~

我是用微信开发者工具开发的一个简单小程序，结构也很简单，app.json文件中pages声明的是每个页面，按顺序，显示是index，index就在第一个声明

  "pages": [
    "pages/index/index",
    "pages/dispute/dispute",
    "pages/logs/logs",
    "pages/handle/handle"
  ],
1
2
3
4
5
6

windows是写小程序展示样式和内容，如图：

  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "首页",
    "navigationBarTextStyle": "black",
    "backgroundColor": "#eff2f8"
  },
1
2
3
4
5
6
7
8

toobar底部tab

"tabBar": {
    "color": "#333",
    "selectedColor": "#3051be",
    "backgroundColor": "#fff",
    "borderStyle": "white",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "images/tab_home_n.png",
        "selectedIconPath": "images/tab_home_s.png"
      },
      {
        "pagePath": "pages/index/index",
        "text": "消息",
        "iconPath": "images/tab_message_n.png",
        "selectedIconPath": "images/tab_message_s.png"
      },
      {
        "pagePath": "pages/index/index",
        "text": "我的",
        "iconPath": "images/tab_me_n.png",
        "selectedIconPath": "images/tab_me_s.png"
      }
    ]
  },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

如图：

引入地图

接下来说说地图的引入，一开始想的麻烦，使用组件写，不仅不能满足需求，还出现bug
先看效果图：

确定后显示：

布局代码很简单：

<view class="applicant-left pull-left">纠纷地点</view>
      <view class="input-box pull-left" bindtap="handleAddressClick">
 {{address}}
      </view>
1
2
3
4

js文件中：

//先定义
var QQMapWX = require('../../qqmap-wx-jssdk.js');
var qqmapsdk;
Page({
  data: {
    address: ""
    }
   )}
  handleAddressClick() {
    wx.chooseLocation({
      success: this.handleChooseLocationSucc.bind(this)
    })
  },
  handleChooseLocationSucc(res) {
    this.setData({
      address: res.address
    })
  },
  onLoad: function(options) {
    if (options.address != null && options.address != '') {
      //设置变量 address 的值
      this.setData({
        address: options.address
      });
    } else {
      // 实例化API核心类
      qqmapsdk = new QQMapWX({
        //此key需要用户自己申请
        key: 'RBFBZ-U25WU-XJWVA-24PP3-OYZYT-PDFFB'
      });
      var that = this;
      // 调用接口
      qqmapsdk.reverseGeocoder({
        success: function(res) {
          console.log(res.result.address);
          that.setData({
            address: res.result.address,
            // activity_location: res.result.address,
            // activity_lat: res.result.address
          });
          console.log(that.data.address);
        },
        fail: function(res) {
          console.log(res);
        },
        complete: function(res) {
          console.log(res);
        }
      });
    };
  },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

上传图片

点击上传按钮，可以上传多张，上传后可以删除，效果：

布局：

<view class='picture-count'>
  <view wx:for="{{picarrayDentify}}" wx:key="{{index}}" class='photo-style pull-left'>
         <view class='iconfont icon-cancel delete-icon' bindtap='deleteDentifyList' data-id='{{index}}'></view>
          <image src="{{item}}" mode="aspecFill" class='choose-picture-style' />
    </view>
  </view>
  <button class="uploading-pic pull-left" bindtap='chooseDentifyimage'>
          <view class="iconfont icon-add evidence-add-icon"></view>
 </button>
1
2
3
4
5
6
7
8
9

在开始不要忘记定义数组picarrayDentify
chooseDentifyimage方法：

  chooseDentifyimage: function() {
    var _this = this;
    wx.chooseImage({
      counts: 9,
      sizeType: ['original', 'compressed'],
      sourceType: ['album', 'camera'],
      success: function(res) {
        let arr = _this.data.picarrayDentify;
        console.log(arr)
        arr.push(res.tempFilePaths);
        console.log(arr)
        _this.setData({
          picarrayDentify: arr
        })
      },
    })
  },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

deleteDentifyList删除方法：

deleteDentifyList: function(e) {
    var index = e.currentTarget.dataset['id'];
    console.log(e.currentTarget.dataset)
    var picarrayDentify = this.data.picarrayDentify;
    picarrayDentify.splice(index, 1);
    console.log(picarrayDentify)
    this.setData({
      picarrayDentify: picarrayDentify,
    })
  },
1
2
3
4
5
6
7
8
9
10

tab切换

这里是两个button点击切换，内容也切换；

<view class="select-button clearfix">
        <button class="button-select {{back?'button-select-after':'button-select-before'}} pull-left" data-current="0" bindtap="switchNav" bindicator-dots="{{indicatorDots}}">予以受理</button>
        <button class="button-select pull-right {{back?'button-select-before':'button-select-after'}} " data-current="1" bindtap="switchNav" bindicator-dots="{{indicatorDots}}">不予受理</button>
      </view>
1
2
3
4

indicatorDots开始声明为true
switchNav方法：

  switchNav: function(e) {
    var that = this;
    if (this.data.currentTab === e.target.dataset.current) {
      //重复点击不予处理
      return false;
    } else 
    if (e.target.dataset.current == 1) {
      that.setData({
        currentTab: e.target.dataset.current,
        back: false
      })
    } else if (e.target.dataset.current == 0) {
      that.setData({
        currentTab: e.target.dataset.current,
        back: true
      })
    }
  },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

css:

.button-select {
  width: 315rpx;
  height: 68rpx;
  color: #9097b0;
  font-size: 30rpx;
  text-align: center;
}
.button-select-before {
  color: #9097b0;
  border-color: #9097b0;
}

.button-select-after {
  color: #3984eb;
  background-color: #ebf2fd;
  border-color: #3984eb;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

重点部分先写到这里，新手多看看微信开放文档