微信小程序9

122 阅读1分钟

实现排序功能

首先在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)
       })
    },