⼩程序实⽤代码段（持续更新中）
前⾔
排名不分先后，按⾃⼰的习惯来的。
总结经验，不喜勿喷哦~
⼀、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
success:function(res){
that.setData({
aheight: res.screenHeight
});
}
})
},
})
三、图⽚上传
<view class="ovf img_box">
<block for="{{img_arr}}"key="{{item.id}}" bindtap="del">
<view class='logoinfo' data-index="{{index}}">
<view class="del">
<image src="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="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(){
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.pFilePaths), })
}
})
}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){
firm){
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) }
})
四、scroll-view滚动页
<scroll-view class="scroll-view_H " scroll-x="true" bindscroll="scroll"> <view class="fxjx_b1" >
<view class="listb">1</view>
</view>
<view class="fxjx_b1" >
<view class="listb">2</view>
</view>
</scroll-view>
.scroll-view_H{white-space: nowrap;height: 600rpx;}
.listb{padding: 25rpx;white-space: normal;}
五、授权登录
app.js
//app.js
App({
globalData:{
userInfo:null,
unionid:null,
token:''
},
onLaunch:function(){
/* 已授权之后，⾃动获取⽤户信息 */
// 判断是否授权
success:(res)=>{//箭头函数为了处理this的指向问题
if(res.authSetting["scope.userInfo"]){
console.log("已授权");
// 获取⽤户信息
success:(res)=>{//箭头函数为了处理this的指向问题
// this.globalData.isok=true
ken='ok'
var that =this
console.log(res.userInfo);//⽤户信息结果
key:'unionid',
success(res){
that.globalData.unionid=res.data
}
})
this.globalData.userInfo = res.userInfo;
if(this.userInfoReadyCallback){//当index.js获取到了globalData就不需要回调函数了，所以回调函数需要做做⼀个判断，如果app.js中有和这个回调函数，那么就对这个函数进⾏调⽤，并将请求到的结果传到index.js中
this.userInfoReadyCallback(res.userInfo);
}
}
})
}
else{
网站底部代码js特效console.log("未授权");
key:'unionid'
})
}
}
})
}
})
wxml
<button open-type="getUserInfo" lang="zh_CN" bindgetuserinfo="onGotUserInfo" class="btn" data-url='../yzzs/yzzs'>
防疫针助⼿
</button>
index.js

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。