国产 无码 综合区,色欲AV无码国产永久播放,无码天堂亚洲国产AV,国产日韩欧美女同一区二区

微信小程序個人中心、我的界面(示例一)

這篇具有很好參考價值的文章主要介紹了微信小程序個人中心、我的界面(示例一)。希望對大家有所幫助。如果存在錯誤或未考慮完全的地方,請大家不吝賜教,您也可以點擊"舉報違法"按鈕提交疑問。

微信小程序使用button按鈕實現(xiàn)個人中心、我的界面(示例一)

微信小程序個人中心、我的界面,使用button按鈕實現(xiàn)界面布局,更好的將分享好友、獲取頭像等功能展現(xiàn)出來,更多示例界面,請前往我的主頁哦。
微信小程序個人中心、我的界面(示例一)
1、js代碼:

const app = getApp();
Page({

  /**
   * 頁面的初始數(shù)據(jù)
   */
  data: {
    login: {
      show: false,
      avatar: 'https://img0.baidu.com/it/u=3204281136,1911957924&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
    }
  },
  // 登錄監(jiān)聽
  chooseAvatar(e) {
    this.setData({
      login: {
        show: true,
        avatar: e.detail.avatarUrl,
      }
    })
  },
  // 基本信息
  basicClick() {
    console.log('基本信息監(jiān)聽');
  },
  // 匿名反饋
  feedbackClick() {
    console.log('匿名反饋監(jiān)聽');
  },
  // 關(guān)于我們
  aboutClick() {
    console.log('關(guān)于我們監(jiān)聽');
  },
  // 退出監(jiān)聽
  exitClick() {
    let that = this;
    wx.showModal({
      title: '提示',
      content: '確定退出登錄嗎?',
      success(res) {
        if (res.confirm) {
          that.setData({
            login: {
              show: false,
              avatar: 'https://img0.baidu.com/it/u=3204281136,1911957924&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
            }
          })
        }
      }
    })
  },

  /**
   * 生命周期函數(shù)--監(jiān)聽頁面加載
   */
  onLoad(options) {

  },

  /**
   * 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函數(shù)--監(jiān)聽頁面顯示
   */
  onShow() {

  },

  /**
   * 生命周期函數(shù)--監(jiān)聽頁面隱藏
   */
  onHide() {

  },

  /**
   * 生命周期函數(shù)--監(jiān)聽頁面卸載
   */
  onUnload() {

  },

  /**
   * 頁面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動作
   */
  onPullDownRefresh() {

  },

  /**
   * 頁面上拉觸底事件的處理函數(shù)
   */
  onReachBottom() {

  },

  /**
   * 用戶點擊右上角分享
   */
  onShareAppMessage() {

  }
})

2、wxml代碼

<view class="top-bg"></view>
<view class="box">
  <!-- 頭像 -->
  <view class="head-box">
    <button open-type="chooseAvatar" class="avatar" bindchooseavatar="chooseAvatar">
      <image class="head-img" src="{{login.avatar}}" mode="widthFix"></image>
    </button>
    <view class="tip">{{login.show?'歡迎使用':'當(dāng)前未登錄,請登錄!'}}</view>
  </view>
  <!-- 第一部分列表 -->
  <view>
    <button class="row" style="width: 100%;" bindtap="basicClick">
      <view class="left">
        <icon class="icon-small" type="success" size="16"></icon>
        <text class="text">基本信息</text>
      </view>
      <view class="right"></view>
    </button>
    <button class="row" style="width: 100%;" bindtap="feedbackClick">
      <view class="left">
        <icon class="icon-small" type="success" size="16"></icon>
        <text class="text">匿名反饋</text>
      </view>
      <view class="right"></view>
    </button>
    <button class="row" style="width: 100%;border-bottom: none;" bindtap="aboutClick">
      <view class="left">
        <icon class="icon-small" type="success" size="16"></icon>
        <text class="text">關(guān)于我們</text>
      </view>
      <view class="right"></view>
    </button>
  </view>
</view>
<!-- 第二部分列表 -->
<view class="end">
  <button open-type="share" class="row" style="width: 100%;">
    <view class="left">
      <icon class="icon-small" type="success" size="16"></icon>
      <text class="text">分享好友</text>
    </view>
    <view class="right"></view>
  </button>
  <button open-type="contact" class="row" style="width: 100%;border-bottom: none;">
    <view class="left">
      <icon class="icon-small" type="success" size="16"></icon>
      <text class="text">在線客服</text>
    </view>
    <view class="right"></view>
  </button>
</view>
<!-- 第三部分列表 -->
<view class="end">
  <button wx:if="{{login.line}}" bindtap="exitClick" class="row" style="width: 100%;border-bottom: none;">
    <view class="left">
      <icon class="icon-small" type="success" size="16"></icon>
      <text class="text">退出登錄</text>
    </view>
  </button>
  <button class="row" open-type="chooseAvatar" bindchooseavatar="chooseAvatar" style="width: 100%;border-bottom: none;" wx:else>
    <view class="left">
      <icon class="icon-small" type="success" size="16"></icon>
      <text class="text">立即登錄</text>
    </view>
  </button>
</view>
<view class="footer">
  <text>?微信小程序個人中心demo</text>
</view>

3、wxss代碼

page {
  background-color: #f1f1f1;
}

/* 設(shè)置背景顏色 */
.top-bg {
  height: 260rpx;
  background-color: #fa3534;
}

/* 圓角盒子 */
.box {
  background-color: white;
  margin-top: -120rpx;
  border-top-left-radius: 50rpx;
  border-top-right-radius: 50rpx;
  padding: 0 20rpx;
}

/* 頭像部分 */
.head-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-bottom: 1rpx solid #fbdbdc;
  padding-bottom: 20rpx;
}

.avatar {
  margin-top: -80rpx;
  font-weight: inherit;
  display: flex;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0);
}

.avatar::after {
  border: none;
}

.head-img {
  width: 140rpx;
  height: 140rpx;
  overflow: hidden;
  border-radius: 50%;
  background-color: #fbdbdc;
}

.tip {
  font-size: 26rpx;
  color: gray;
  margin: 15rpx 0;
}

/* 列表部分 */
.row {
  display: flex;
  align-items: center;
  padding: 36rpx 10rpx;
  font-size: 30rpx;
  font-weight: inherit;
  background-color: rgba(0, 0, 0, 0);
  border-bottom: 1rpx solid #fbdbdc;
}

.row::after {
  border: none;
}

.text {
  margin-left: 15rpx;
  color: #636262;
}

.left {
  width: 90%;
  text-align: left;
  display: flex;
  align-items: center;
}

.right {
  width: 10%;
  text-align: right;
  color: rgb(148, 147, 147);
}

.end {
  background-color: white;
  margin-top: 20rpx;
  padding: 0 20rpx;
}

.footer {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20rpx 0;
  font-size: 22rpx;
  margin: 30rpx 0;
  color: gray;
}

4、json代碼文章來源地址http://www.zghlxwxcb.cn/news/detail-509699.html

{
  "usingComponents": {},
  "navigationBarBackgroundColor": "#fa3534",
  "navigationBarTitleText": "個人中心"
}

到了這里,關(guān)于微信小程序個人中心、我的界面(示例一)的文章就介紹完了。如果您還想了解更多內(nèi)容,請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持TOY模板網(wǎng)!

本文來自互聯(lián)網(wǎng)用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務(wù),不擁有所有權(quán),不承擔(dān)相關(guān)法律責(zé)任。如若轉(zhuǎn)載,請注明出處: 如若內(nèi)容造成侵權(quán)/違法違規(guī)/事實不符,請點擊違法舉報進(jìn)行投訴反饋,一經(jīng)查實,立即刪除!

領(lǐng)支付寶紅包贊助服務(wù)器費(fèi)用

相關(guān)文章

  • 微信小程序個人中心頁面 案例

    微信小程序個人中心頁面 案例

    微信小程序 開發(fā),經(jīng)常會遇到個人中心頁面 的需求,為了方便大家使用,決定將個人總想頁面進(jìn)行開源,以供大家參考交流。 一、效果預(yù)覽 ? ? ? ?二、源代碼 abouthe.json文件 abouthe.wxml文件 abouthe.wxss文件 abouthe.ts文件

    2024年02月11日
    瀏覽(23)
  • 微信小程序 - 商城項目 - 個人中心
  • 微信小程序進(jìn)階——后臺交互個人中心授權(quán)登錄

    微信小程序進(jìn)階——后臺交互個人中心授權(quán)登錄

    目錄 一、小程序登錄微信登錄接口演示 1.1 項目導(dǎo)入 1.2 method1? 1.3 method2 二、小程序授權(quán)登錄 2.1 登錄過程 2.1.1 詳解 2.1.2 圖解 2.2 后端代碼導(dǎo)入 2.3 前端代碼導(dǎo)入 ?編輯 2.4 案例演示 前端代碼如下: 2.4.1 前端調(diào)用接口地址 2.4.2 個人中心 后端代碼如下: 2.5 效果演示? ? 然后

    2024年02月02日
    瀏覽(26)
  • 微信小程序之會議OA個人中心后臺交互

    微信小程序之會議OA個人中心后臺交互

    目錄 獲取用戶昵稱頭像和昵稱 小程序登錄 登錄-小程序 wx.checkSession wx.login wx.request 后臺 準(zhǔn)備數(shù)據(jù)表 反向生成工具生成 準(zhǔn)備封裝前端傳過來的數(shù)據(jù) 小程序服器配置 導(dǎo)入微信小程序SDK application.yml WxProperties WxConfig WxAuthController 登錄-小程序 login.js user.js util.js emoji wx.getUserProfi

    2024年02月22日
    瀏覽(32)
  • 微信小程序個人簡歷界面(編輯版)

    微信小程序個人簡歷界面(編輯版)

    1、微信小程序?qū)崿F(xiàn)簡單的個人簡歷界面,包含基本信息、教育背景、獲獎證書、興趣愛好等,簡歷信息支持修改編輯內(nèi)容。 2、通過此文章,希望能帶給更多學(xué)習(xí)微信小程序的伙伴們一點點經(jīng)驗,示例簡潔,布局簡單,喜歡的小伙伴,可以進(jìn)我主頁,分享更多學(xué)習(xí)經(jīng)驗和示例

    2024年02月12日
    瀏覽(87)
  • 微信小程序首頁、界面布局、功能簡潔(示例三)

    微信小程序首頁、界面布局、功能簡潔(示例三)

    直接上具體代碼: 1、js代碼 2、wxml代碼 3、wxss代碼 4、json代碼 界面中包含的圖片地址可自行修改。頁面布局簡潔,功能簡單,沒有寫具體的監(jiān)聽事件,只是簡單的將監(jiān)聽進(jìn)行了綁定,如需要具體的監(jiān)聽功能事件,需要根據(jù)自己的需求進(jìn)行修改呦,如需更多示例,進(jìn)我主頁呦

    2024年01月24日
    瀏覽(28)
  • 微信小程序首頁、界面布局、自定義頂部(示例一)

    微信小程序首頁、界面布局、自定義頂部(示例一)

    具體界面見下圖: 如需界面中引用的圖片文件和更多功能,請滑動至底部查看下載鏈接,可下載完整版,下載后直接使用微信開發(fā)者工具打開即可,完整版功能更詳細(xì)呦。當(dāng)前界面的布局樣式代碼如下(如存在不足之處,請根據(jù)具體需求,自行修改): 1、js代碼: 2、wxml代

    2024年02月12日
    瀏覽(33)
  • 微信小程序首頁、界面布局、3D輪播圖效果(示例二)

    微信小程序首頁、界面布局、3D輪播圖效果(示例二)

    使用swiper實現(xiàn)3D輪播圖效果,自定義頂部狀態(tài)欄,具體代碼: 1、js代碼 2、wxml代碼 3、wxss代碼 4、json代碼 如需要下載完整版,包含監(jiān)聽事件、圖片文件等,請前往下方鏈接,下載完整版,下載后直接使用微信開發(fā)者工具打開即可,下載鏈接為: 小程序完整版界面(示例二)

    2024年02月10日
    瀏覽(28)
  • 微信小程序日記、微信小程序個人空間、個人日記

    微信小程序日記、微信小程序個人空間、個人日記

    個人比較喜歡微信小程序,因為小程序所追求的用戶體驗、代碼質(zhì)量、美觀的樣式,簡單方便豐富的api、樣式封裝等,同時又與普通的前端開發(fā)非常相似,讓人很容易就上手。 這篇博客介紹的是一款記錄個人/家庭日常記錄的微信小程序。 日記列表+詳情 我的 編輯日記 編輯日

    2023年04月22日
    瀏覽(16)
  • 登錄界面到個人中心

    1. 使用路由渲染登錄組件 在? /src/views ?目錄之下,創(chuàng)建? Login ?文件夾,并在其下新建? Login.vue登錄組件 在? /src/router/index.js ?路由模塊中,導(dǎo)入需要通過路由渲染的? login.vue ?登錄組件 在路由模塊的? routes ?數(shù)組中,聲明登錄組件的路由規(guī)則 在? App.vue ?根組件中聲明路由

    2023年04月17日
    瀏覽(12)

覺得文章有用就打賞一下文章作者

支付寶掃一掃打賞

博客贊助

微信掃一掃打賞

請作者喝杯咖啡吧~博客贊助

支付寶掃一掃領(lǐng)取紅包,優(yōu)惠每天領(lǐng)

二維碼1

領(lǐng)取紅包

二維碼2

領(lǐng)紅包