当前位置 主页 > 网站技术 > 代码类 >

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

    栏目:代码类 时间:2019-12-17 21:10

    前言

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

    总结经验,不喜勿喷哦~

    一、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)
     }
    })