欢迎来到258分享网,纯净的网络源码分享基地!

258资源分享网

全部作品
全部作品
网站源码
微信源码
素材特效
源码插件
视频教程
建站学院
热门搜索: 织梦  农业种植  农业  安全设置  官方
258资源分享 > 建站学院 > 微信开发 > 微信小程序侧边栏+语音记账本(主页面)

推荐下载

HTML5响应式自适应网咯设计

2020-05-12   浏览:740

高端HTML5响应式企业通用网

2020-05-06   浏览:521

html5响应式外贸网站英文版

2020-05-08   浏览:510

HTML5自适应律师工作室类网

2020-04-04   浏览:504

HTML5影视传媒文化公司类网

2020-05-12   浏览:502

微信小程序侧边栏+语音记账本(主页面)

发布时间:2021-01-01  

微信小程序侧边栏+语音记账本(主页面)

微信小程序侧边栏+语音记账本(主页面)

/*app.json*/

{
  "pages": [
    "page/component/index"
   
  ],
  "window": {
    "navigationBarBackgroundColor": "#394252",
    "navigationBarTitleText": "语音记帐本",
    "navigationBarTextStyle":"#394252"
  },
  "tabBar": {
    "color": "#dddddd",
    "selectedColor": "#3cc51f",
    "borderStyle": "black",
    "backgroundColor": "#ffffff",
    "list": []
  },
  "networkTimeout": {
    "request": 10000,
    "connectSocket": 10000,
    "uploadFile": 10000,
    "downloadFile": 10000
  },
  "debug": true,
  "enablePullDownRefresh":true,
  "disableScroll":true


}

/**js*/

var util = require('../../util/util.js');
var myapp = getApp();  
const icons = util.icons;
var that;
Page({
  data: {
    icons: icons,
    ishide:true,
    toView: 'red',
    screenHeight:myapp.SystemInfo().screenHeight,
  },
  clickItemToggeHide:function(e){
    that.setData({
      ishide:!that.data.ishide
    });
  },


  tap: function(e) {
    for (var i = 0; i < order.length; ++i) {
      if (order[i] === this.data.toView) {
        this.setData({
          toView: order[i + 1]
        })
        break
      }
    }
  },
  tapMove: function(e) {
    this.setData({
      scrollTop: this.data.scrollTop + 10
    })
  },


  onLoad: function () {
     that = this;
  }
})

/**view*/

<view class="man-page">
<view class="head-man">
<view class="head-man-left">
<image class="man-icon-image1" src=http://www.yiyongtong.com/archives/"{{icons.icon8}}" bindtap="clickItemToggeHide"/>
</view>
<view class="head-man-center">
<label>本月支出总额</label>
<view class="head-man-center-iamge"><image src=http://www.yiyongtong.com/archives/"{{icons.icon9}}" class="man-icon-image2" /></view>
</view>
<view class="head-man-right">
<image class="man-icon-image1" src=http://www.yiyongtong.com/archives/"{{icons.icon7}}"/>
</view>
</view>




<view class="head-man" style="padding:0px;">
<view class="head-man-left  head-man-left-style head-man-center-style">
<view class="app-font-size" style="color:#EFF3F5;margin-top:4px;">必要开支</view>
<view class="app-font-size2">8300</view>
</view>
<view class="head-man-center  head-man-center-style">
<view class="app-center-font-size" style="margin-top:5px;color:#384053;">9800</view>
</view>
<view class="head-man-right head-man-right-style head-man-center-style">
<view class="app-font-size" style="color:#EFF3F5;margin-top:4px;">不必要开支</view>
<view class="app-font-size2">1500</view>
</view>
</view>
</view>


<view class="man-page qian-style" >
<view class="app-font-size2" style="padding-top:10px;">2017年12月12日</view>
</view>


<scroll-view scroll-y="true" style="height: {{screenHeight-200}}px;background-color:#384053;" bindscrolltoupper="upper" bindscrolltolower="lower" scroll-top="120" bindscroll="scroll" >
    

<view   class="scroll-item-style" bindtap="toggelClass" data-bottonwidth="300" data-bottonheight="53" data-bottonclass="{{item1}}">
<view class="ripple rippleEffect" wx:for="{{items}}"  animation="{{animationData}}"style="{{item1}}">
</view>
  <view class="scroll-item-style-left">20187</view>
  <view class="scroll-item-style-right">
<view class="scroll-item-style-right-top">2017-12-15 12:25</view>
<view class="scroll-item-style-right-bottom">
<view style="display:inline-flex;"><image class="main-icon-image3" src=http://www.yiyongtong.com/archives/"{{icons.icon10}}"/></view>
<label style="color:#384053;">超市购物</label></view>
  </view>
</view>
<view class="scroll-item-style">
  <view class="scroll-item-style-left">20187</view>
  <view class="scroll-item-style-right">
<view class="scroll-item-style-right-top">2017-12-15 12:25</view>
<view class="scroll-item-style-right-bottom">
<view style="display:inline-flex;"><image class="main-icon-image3" src=http://www.yiyongtong.com/archives/"{{icons.icon10}}"/></view>
<label style="color:#384053;">超市购物</label></view>
  </view>
</view>


<view class="scroll-item-style">
  <view class="scroll-item-style-left">20187</view>
  <view class="scroll-item-style-right">
<view class="scroll-item-style-right-top">2017-12-15 12:25</view>
<view class="scroll-item-style-right-bottom">
<view style="display:inline-flex;"><image class="main-icon-image3" src=http://www.yiyongtong.com/archives/"{{icons.icon10}}"/></view>
<label style="color:#384053;">超市购物</label></view>
  </view>
</view>
<view class="scroll-item-style">
  <view class="scroll-item-style-left">20187</view>
  <view class="scroll-item-style-right">
<view class="scroll-item-style-right-top">2017-12-15 12:25</view>
<view class="scroll-item-style-right-bottom">
<view style="display:inline-flex;"><image class="main-icon-image3" src=http://www.yiyongtong.com/archives/"{{icons.icon10}}"/></view>
<label style="color:#384053;">超市购物</label></view>
  </view>
</view>
<view class="scroll-item-style">
  <view class="scroll-item-style-left">20187</view>
  <view class="scroll-item-style-right">
<view class="scroll-item-style-right-top">2017-12-15 12:25</view>
<view class="scroll-item-style-right-bottom">
<view style="display:inline-flex;"><image class="main-icon-image3" src=http://www.yiyongtong.com/archives/"{{icons.icon10}}"/></view>
<label style="color:#384053;">超市购物</label></view>
  </view>
</view>
<view class="scroll-item-style2">
  <view class="scroll-item-style-left" style="color:#05E65B">20187</view>
  <view class="scroll-item-style-right">
<view class="scroll-item-style-right-top">2017-12-15 12:25</view>
<view class="scroll-item-style-right-bottom">
<view style="display:inline-flex;"><image class="main-icon-image3" src=http://www.yiyongtong.com/archives/"{{icons.icon10}}"/></view>
<label style="color:#384053;">超市购物</label></view>
  </view>
</view>
<view class="scroll-item-style2">
  <view class="scroll-item-style-left" style="color:#05E65B">20187</view>
  <view class="scroll-item-style-right">
<view class="scroll-item-style-right-top">2017-12-15 12:25</view>
<view class="scroll-item-style-right-bottom">
<view style="display:inline-flex;"><image class="main-icon-image3" src=http://www.yiyongtong.com/archives/"{{icons.icon10}}"/></view>
<label style="color:#384053;">超市购物</label></view>
  </view>
</view>
<view class="scroll-item-style2">
  <view class="scroll-item-style-left" style="color:#05E65B">20187</view>
  <view class="scroll-item-style-right">
<view class="scroll-item-style-right-top">2017-12-15 12:25</view>
<view class="scroll-item-style-right-bottom">
<view style="display:inline-flex;"><image class="main-icon-image3" src=http://www.yiyongtong.com/archives/"{{icons.icon10}}"/></view>
<label style="color:#384053;">超市购物</label></view>
  </view>
</view>
<view class="scroll-item-style2">
  <view class="scroll-item-style-left" style="color:#05E65B">20187</view>
  <view class="scroll-item-style-right">
<view class="scroll-item-style-right-top">2017-12-15 12:25</view>
<view class="scroll-item-style-right-bottom">
<view style="display:inline-flex;"><image class="main-icon-image3" src=http://www.yiyongtong.com/archives/"{{icons.icon10}}"/></view>
<label style="color:#384053;">超市购物</label></view>
  </view>
</view>
  </scroll-view>


<view class="man-page" style="height:46px;">
<view class="bottom-input">
      <input name="input" style="height:30px;padding:5px;" placeholder="增加一笔支出" />
    </view>
</view>


<view class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-left {{ishide?'cbp-spmenu-open':''}}" id="cbp-spmenu-s1">
<view class="menu-item" data-itemindex="1" bindtap="clickItemToggeHide"><image src=http://www.yiyongtong.com/archives/"{{icons.icon1}}" class="menu-item-image"/>  分类标签管理</view>
<view class="menu-item" data-itemindex="2" bindtap="clickItemToggeHide"><image src=http://www.yiyongtong.com/archives/"{{icons.icon2}}" class="menu-item-image"/>固定支出设置</view>
<view class="menu-item" data-itemindex="3" bindtap="clickItemToggeHide"><image src=http://www.yiyongtong.com/archives/"{{icons.icon3}}" class="menu-item-image"/>支出权重分析</view>
<view class="menu-item" data-itemindex="4" bindtap="clickItemToggeHide"><image src=http://www.yiyongtong.com/archives/"{{icons.icon4}}" class="menu-item-image"/>同比支出对比</view>
<view class="menu-item" data-itemindex="5" bindtap="clickItemToggeHide"><image src=http://www.yiyongtong.com/archives/"{{icons.icon5}}" class="menu-item-image"/>消息通知管理</view>
<view class="menu-item" data-itemindex="6" bindtap="clickItemToggeHide"><image src=http://www.yiyongtong.com/archives/"{{icons.icon6}}" class="menu-item-image"/>帮助建议反馈</view>
<view class="menu-item" data-itemindex="6" bindtap="clickItemToggeHidetext"><image src=http://www.yiyongtong.com/archives/"{{icons.icon6}}" class="menu-item-image"/>帮助建议反馈</view>
</view>

/**uilt.js*/