微信小程序业务类型简洁纯文字会员中心设计制作开发教程

本文给大家带来的是微信小程序业务类型简洁纯文字会员中心设计制作开发教程，制作好以后效果图如下：

一、wxml页面代码如下：

<!--pages/helpcentreMember/helpcentreMember.wxml-->
<view class="first" bindtap="oneTap">
    <view class="wrap">
      <view class="icon">
      <image class="icon-image"  src="../../images/member/1111.png"></image>
      </view>
      <view class="word">
        业务类型
      </view>
    </view>
    <view class="rightImg">
      <image class="top-arrow" src="{{outArrow[oneArrowIndex]}}"></image>
    </view>
</view>
<view class="belongFirst" hidden="{{onehidden}}">
  <block wx:for="{{Firstsubmenu}}">
      <view class="subwrap" bindtap="jump">
        <view class="one">
            <view class="name">{{item.name}}</view>
            <view class="img">
                <image class="right-arrow" src="../../images/common/Arrow-right.png"></image>           
            </view>
        </view>
        <view class="hr"></view>
      </view>
  </block>   
</view>
<view class="first" bindtap="twoTap">
    <view class="wrap">
      <view class="icon">
      <image class="icon-image"  src="../../images/member/2222.png"></image>
      </view>
      <view class="word">
        账户资产
      </view>
    </view>
    <view class="rightImg">
      <image class="top-arrow" src="{{outArrow[twoArrowIndex]}}"></image>
    </view>
</view>
<view class="belongFirst" hidden="{{twohidden}}">
  <block wx:for="{{Secondsubmenu}}">
      <view class="subwrap">
        <view class="one">
            <view class="name">{{item.name}}</view>
            <view class="img">
                <image class="right-arrow" src="../../images/common/Arrow-right.png"></image>           
            </view>
        </view>
        <view class="hr"></view>
      </view>
  </block>   
</view>
<view class="first" bindtap="threeTap">
    <view class="wrap">
      <view class="icon">
      <image class="icon-image"  src="../../images/member/3333.png"></image>
      </view>
      <view class="word">
        配送说明
      </view>
    </view>
    <view class="rightImg">
      <image class="top-arrow" src="{{outArrow[threeArrowIndex]}}"></image>
    </view>
</view>
<view class="belongFirst" hidden="{{threehidden}}">
  <block wx:for="{{Thirdsubmenu}}">
      <view class="subwrap">
        <view class="one">
            <view class="name">{{item.name}}</view>
            <view class="img">
                <image class="right-arrow" src="../../images/common/Arrow-right.png"></image>           
            </view>
        </view>
        <view class="hr"></view>
      </view>
  </block>   
</view>
<view class="first" bindtap="fourTap">
    <view class="wrap">
      <view class="icon">
      <image class="icon-image"  src="../../images/member/4444.png"></image>
      </view>
      <view class="word">
        售后服务
      </view>
    </view>
    <view class="rightImg">
      <image class="top-arrow" src="{{outArrow[fourArrowIndex]}}"></image>
    </view>
</view>
<view class="belongFirst" hidden="{{fourhidden}}">
  <block wx:for="{{Fourthsubmenu}}">
      <view class="subwrap">
        <view class="one">
            <view class="name">{{item.name}}</view>
            <view class="img">
                <image class="right-arrow" src="../../images/common/Arrow-right.png"></image>           
            </view>
        </view>
        <view class="hr"></view>
      </view>
  </block>   
</view>
<view class="first" bindtap="fiveTap">
    <view class="wrap">
      <view class="icon">
      <image class="icon-image"  src="../../images/member/5555.png"></image>
      </view>
      <view class="word">
        用户须知
      </view>
    </view>
    <view class="rightImg">
      <image class="top-arrow" src="{{outArrow[fiveArrowIndex]}}"></image>
    </view>
</view>
<view class="belongFirst" hidden="{{fivehidden}}">
  <block wx:for="{{Fivethsubmenu}}">
      <view class="subwrap">
        <view class="one">
            <view class="name">{{item.name}}</view>
            <view class="img">
                <image class="right-arrow" src="../../images/common/Arrow-right.png"></image>           
            </view>
        </view>
        <view class="hr"></view>
      </view>
  </block>   
</view>

二、wxss样式文件代码如下：

/* pages/helpcentreMember/helpcentreMember.wxss */
.first{
  display:flex;
  justify-content:space-between;
  padding:15px;
  align-items:center;
  background-color:#ffffff;
  margin-top:10px;
  box-shadow:2px 1px 3px rgba(0,0,0,0.2);
  font-size: 16px;
}
.icon{

}
.hr{
  width: 100%;
  height: 1px;
  margin:5px 0 15px 0;
  background-color: #c7c7c7;
}
.word{
  margin-left:15px;
  font-weight:bold;
}
.belongFirst{
}
.wrap{
  display:flex;
  align-items:center;

}
.icon-image{
  width:15px;
  height:15px;

}
.belongFirst{
  margin-top:5px;
  padding:10px 25px;
  background-color:#ffffff;
  font-size: 16px;
}
.subwrap{

}
.one{
  display:flex;
  justify-content:space-between;
}
.img-sm{
  width: 15px 15px;
}
.top-arrow{
  height: 13px;
  width: 20px;
}
.right-arrow{
  height: 18px;
  width: 10px;
}
.name{
  color: rgba(0,0,0,0.7)
}

三、js页面代码如下：

// pages/helpcentreMember/helpcentreMember.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
      onehidden:false,
      twohidden:true,
      threehidden: true,
      fourhidden: true,
      fivehidden: true,
      oneArrowIndex:0,
      twoArrowIndex:1,
      threeArrowIndex:1,
      fourArrowIndex:1,
      fiveArrowIndex:1,
      outArrow: ["../../images/common/helparrow-top.png","../../images/common/helparrow-bottom.png"],
      Firstsubmenu:[
        {"name":"代购","url":""},
        { "name": "国际转运", "url": "" },
        { "name": "商城", "url": "" },
        { "name": "自助购", "url": "" },
      ],
      Secondsubmenu: [
        { "name": "账号注册", "url": "" },
        { "name": "修改密码及找回密码", "url": "" },
        { "name": "充值查询及退款", "url": "" },
        { "name": "支付方式", "url": "" },
        { "name": "收货地址", "url": "" },

      ],
      Thirdsubmenu: [
        { "name": "配送方式", "url": "" },
        { "name": "提交订单", "url": "" },
        { "name": "邮寄限制", "url": "" },
        { "name": "海关及税项", "url": "" },
      ],
      Fourthsubmenu: [
        { "name": "商品退换货", "url": "" },
        { "name": "联系客服", "url": "" },
        { "name": "查询物流", "url": "" },
        { "name": "商品异常", "url": "" },
        { "name": "包裹丢失", "url": "" },

      ], 
      Fivethsubmenu: [
        { "name": "参见问题", "url": "" },
        { "name": "商品保管期限", "url": "" },
        { "name": "用户隐私和保护规则", "url": "" },
        { "name": "寄送限制", "url": "" },
      ]
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
  
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
  
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
  firstHidden:false
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
  
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
  
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
  
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
  
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
  
  },
  oneTap:function(){
    var firstHidden = this.data.onehidden === true ? false : true
    var outArrowIndex = firstHidden?1:0;
    this.setData({
      onehidden: firstHidden,
      oneArrowIndex: outArrowIndex
    })
  },
  twoTap: function () {
    var firstHidden = this.data.twohidden === true ? false : true
    var outArrowIndex = firstHidden ? 1 : 0;
    this.setData({
      twohidden: firstHidden,
      twoArrowIndex: outArrowIndex
    })
  },
  threeTap: function () {
    var firstHidden = this.data.threehidden === true ? false : true
    var outArrowIndex = firstHidden ? 1 : 0;
    this.setData({
      threehidden: firstHidden,
      threeArrowIndex: outArrowIndex
    })
  },
  fourTap: function () {
    var firstHidden = this.data.fourhidden === true ? false : true
    var outArrowIndex = firstHidden ? 1 : 0;
    this.setData({
      fourhidden: firstHidden,
      fourArrowIndex: outArrowIndex
    })
  },
  fiveTap: function () {
    var firstHidden = this.data.fivehidden === true ? false : true
    var outArrowIndex = firstHidden ? 1 : 0;
    this.setData({
      fivehidden: firstHidden,
      fiveArrowIndex: outArrowIndex
    })
  },
  jump:function(){
    wx.redirectTo({
      url: '../../pages/helpcentreAgentMember/helpcentreAgentMember',
    })
  }
})

模板简介：该模板名称为【微信小程序业务类型简洁纯文字会员中心设计制作开发教程】，大小是，文档格式为.，推荐使用打开，作品中的图片，文字等数据均可修改，图片请在作品中选中图片替换即可，文字修改直接点击文字修改即可，您也可以新增或修改作品中的内容，该模板来自用户分享，如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。