实现排序功能
首先在json中引入组件
"van-dropdown-menu": "@vant/weapp/dropdown-menu/index",
"van-dropdown-item": "@vant/weapp/dropdown-item/index"
接下来在wxml中使用组件:
<van-dropdown-menu>
<van-dropdown-item value="{{ value1 }}" options="{{ option1 }}"
bind:change="onSwitch1Change"
/>
<van-dropdown-item value="{{ value2 }}" options="{{ option2 }}"
bind:change="onSwitch2Change"
/>
接下来在js中配置代码:
//data中添加一下属性
option1: [
{ text: '价格排序', value: 0 },
{ text: '价格倒序', value: 1 },
],
option2: [
{ text: '评论排序', value: 0 },
{ text: '评论倒序', value: 1 },
],
value1: 0,
value2: 0,
//添加排序的函数
onSwitch1Change({detail}){
this.data.page = 1;
this.data.value2 = 0;
wx.pageScrollTo({
scrollTop:0,
})
this.setData({ value1: detail });
this.init()
},
onSwitch2Change({detail}){
this.data.page = 1;
this.data.value1 = 0;
wx.pageScrollTo({
scrollTop:0,
})
this.setData({ value2: detail });
console.log(detail)
this.init()
},
实现获取用户数据及退出登录功能 wxml页面布置:
<view wx:if="{{flag}}" class="info-btn">
<van-button plain type="info" bindtap="getUserInfo">点击进入我的</van-button>
</view>
<view wx:else class="info-btn">
<view>
<van-image
round
width="120"
height="120"
lazy-load
src="{{avatarUrl}}"
/>
</view>
<view>{{nickName}}</view>
<van-button plain type="info" bindtap="loginout">退出登录</van-button>
</view>
js代码:
const {
logoutHttp
} = require('../../http/api')
Page({
/**
* 页面的初始数据
*/
data: {
nickName:'',
avatarUrl:'',
flag:true
},
getUserInfo(){
wx.getUserProfile({
desc:'展示用户信息',
success:({userInfo:{nickName,avatarUrl}})=>{
this.setData({
nickName,
avatarUrl,
flag:false
})
}
})
},
loginout(){
logoutHttp()
.then(res=>{
wx.clearStorageSync('token')
wx.navigateTo({
url: '/pages/login/login',
})
})
.catch(err=>{
console.log(err)
})
},