微信小程序实用代码段(收藏版)

前言

排名不分先后，按自己的习惯来的。

总结经验，不喜勿喷哦~

一、tab切换

<view class=" {{currentTab==0 ? 'select' : ''}}" data-current="0" bindtap="swichNav"> tab1</view><view class=" {{currentTab==1 ? 'select' : ''}}" data-current="1" bindtap="swichNav"> tab2</view>Page({data:{ // tab切换  currentTab: 0,},swichNav: function (e) { var that = this; if (this.data.currentTab === e.target.dataset.current) { return false; } else { that.setData({ currentTab: e.target.dataset.current }) } },})

二、swiper切换

<view>  <text class=" {{currentTab==0 ? 'select' : ''}}" data-current="0" bindtap="swichNav">tab1</text>  <text class=" {{currentTab==1 ? 'select' : ''}}" data-current="1" bindtap="swichNav">tab2 </text>  <text class=" {{currentTab==2 ? 'select' : ''}}" data-current="2" bindtap="swichNav">tab3 </text>  </view> <swiper current="{{currentTab}}" bindchange="bindChange" class='swp' > <swiper-item>页面1</swiper-item> <swiper-item>页面2</swiper-item> <swiper-item>页面3</swiper-item> </swiper>Page({data:{ currentTab: 0, aheight: ''},// 滑动切换 bindChange: function (e) { var that = this; that.setData({ currentTab: e.detail.current }); }, //点击tab切换 swichNav: function (e) { var that = this; if (this.data.currentTab === e.target.dataset.current) { return false; } else { that.setData({ currentTab: e.target.dataset.current }) } }, // swiper 自适应高度 onLoad: function (options) { var that = this wx.getSystemInfo({ success: function (res) { that.setData({  aheight: res.screenHeight }); } }) },})

三、图片上传

 <view class="ovf img_box">  <block wx:for="{{img_arr}}" wx:key="{{item.id}}" bindtap="del">  <view class='logoinfo' data-index="{{index}}">   <view class="del">   <image src="http://192.168.2.61/wx_ry/del.png" mode="widthFix" bindtap="deleteImage"></image>   </view>   <image src='{{item}}' mode="widthFix"></image>  </view>  </block>  <view class="upload">   <image src="http://192.168.2.61/wx_ry/add.png" mode="widthFix" bindtap="upimg"></image>  </view> </view>.upload { width: 20%; float: left; margin-top:33rpx ; }.upload image{ width: 100%; }.logoinfo{ width: 20%; float: left; margin-right:2% ; }.del{ width: 20%; float: right; }.del image{ width: 100%; }.logoinfo image{ width: 100%; }page({data:{ img_arr: []}, // 图片上传 upimg: function () { var that = this; if (this.data.img_arr.length < 3) { wx.chooseImage({ sizeType: ['original', 'compressed'], success: function (res) {  that.setData({  img_arr: that.data.img_arr.concat(res.tempFilePaths),  }) } }) } else { wx.showToast({ title: '最多上传三张图片', icon: 'loading', duration: 3000 }); } }, // 删除图片 deleteImage: function (e) { var that = this; var index = e.currentTarget.dataset.index; //获取当前长按图片下标 console.log(that.data.img_arr) wx.showModal({ title: '提示', content: '确定要删除此图片吗？', success: function (res) { if (res.confirm) {  console.log('点击确定了');  that.data.img_arr.splice(index, 1); } else if (res.cancel) {  console.log('点击取消了');  return false; } that.setData({  img_arr: that.data.img_arr }); } }) }, // 上传 upload: function () { var that = this for (var i = 0; i < this.data.img_arr.length; i++) { wx.uploadFile({ url: 'https:***/submit', filePath: that.data.img_arr[i], name: 'content', formData: adds, success: function (res) {  console.log(res)  if (res) {  wx.showToast({  title: '已提交发布！',  duration: 3000  });  } } }) } this.setData({ formdata: '' }) }, // 提交 formSubmit: function (e) { console.log('form发生了submit事件，携带数据为：', e.detail.value) }})