【微信小程序】menu

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› 移动开发›小程序云开发高级教程

原作者: [db:作者] 来自: [db:来源] 收藏邀请

【menuTest.js】

//var config = require('../../config.js');

// pages/test/test.js
Page({

  /**
   * 页面的初始数据
   */
  data: {

    imgUrls: [
      'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
      'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
      'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'
    ],
    indicatorDots: true,
    autoplay: true,
    interval: 5000,
    duration: 1000,
 
    
    list:[],

  },

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

    var entityno = wx.getStorageSync('entityno');
    var username= wx.getStorageSync('username');
    var password= wx.getStorageSync('password');
    var roleno= wx.getStorageSync('roleno');
    var userno= wx.getStorageSync('userno');
    var entitytype= wx.getStorageSync('entitytype');
 
    var that=this;   
    wx.request({
      url: 'http://192.168.1.21:8080/scon/app/selectMenu',
      data: {
        entityno ,
        username ,
        password ,
        roleno,
        userno,
        entitytype
 
      },
      method: 'GET',
      header: {
        //'content-type': 'application/json'
        'content-type': 'json'
      },
      success: function (res) {
        console.log(res.data);
        var dta = res.data;
        that.setData({
          list: dta,       
        })

        
      },
      fail: function (res) {
        console.log("--------fail--------");
      }
    })

  },

  out:function(outUrl){   
    console.log(outUrl);
    wx.navigateTo({
      url: '../out/out?url=outUrl',
    })
  },
 
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
   
  },

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

  },

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

  },

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

  },
  

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

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

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
  
})

【menuTest.json】

{ 
  "backgroundColor": "gray",
  "backgroundTextStyle": "light",
  "navigationBarBackgroundColor": "#778899",
  "navigationBarTitleText": "首页",
  "navigationBarTextStyle": "#778899"
}

【menuTest.wxml】

     <view class="weui-grids">   
     <swiper indicator-dots="{{indicatorDots}}" indicator-color="white" indicator-active-color="red" circular="true" 
      autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
      <block wx:for="{{imgUrls}}" wx:key="imgUrls">
          <swiper-item>
          <image style='height:100%;width:100%;' src="{{item}}"/>
          </swiper-item>    
      </block>
     </swiper>      
     <view wx:for="{{list}}" wx:key="menuNo">    
          <view class="s-head">{{item.name}}</view>   
        <view class="weui-grid" wx:for="{{item.submenu}}" wx:key="url">   
            <navigator url="/pages/out/out?url={{item.url}}&entityNo={{item.menuNo}}" >     
                <view class='weui-grid__bg'>
                    <view class="weui-grid__icon">
                        <image src="../images/飞机.png" mode="scaleToFill" />
                    </view>
                    <text class="weui-grid__label">{{item.name}}</text>
                </view>
            </navigator>
        </view>
    </view> 
</view>

【menuTest.wxss】

.weui-grids {
    position: relative;
    overflow: hidden;
}
.index-desc {
  margin-top: 20rpx;
  color: #888888;
  font-size: 28rpx;  
  padding: 80rpx;
  text-align: center;
  
}

.s-head{
  //padding: 60rpx 50rpx 80rpx;
  text-align:left;
  font-size: 32rpx;
  color: #fc8253; 
} 
.s-title{
  display: inline-block;
  padding: 0 40rpx 20rpx 40rpx;
  font-size: 32rpx;
  color: #778899; 
  text-align: center;
}
.s-line{
  margin: 0 auto;
  width: 150rpx;
  height: 2rpx;
  background-color: #D8D8D8;
}
 
 .weui-grids:before {
    content: " ";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    height: 1px;
    border-top: 1px solid #d9d9d9;
    color: #d9d9d9;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
} 
 
 .weui-grids:after {
    content: " ";
    position: absolute;
    left: 0;
    top: 0;
    width: 1px;
    bottom: 0;
    border-left: 1px solid #d9d9d9;
    color: #d9d9d9;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: scaleX(0.5);
    transform: scaleX(0.5);
} 
 
 
 
.weui-grid {
    position: relative;
    float: left;
    padding: 20px 10px;
    width: 33.33333333%;
    box-sizing: border-box;
}
 
 .weui-grid:before {
    content: " ";
    position: absolute;
    right: 0;
    top: 0;
    width: 1px;
    bottom: 0;
    border-right: 1px solid #d9d9d9;
    color: #d9d9d9;
    -webkit-transform-origin: 100% 0;
    transform-origin: 100% 0;
    -webkit-transform: scaleX(0.5);
    transform: scaleX(0.5);
} 
 
 .weui-grid:after {
    content: " ";
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    height: 1px;
    border-bottom: 1px solid #d9d9d9;
    color: #d9d9d9;
    -webkit-transform-origin: 0 100%;
    transform-origin: 0 100%;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
} 
 
  .weui-grid:active {
    background-color: #ECECEC;
}  
 
.weui-grid__bg {
    position: relative;
    float: left;
    padding: 0px 0px;
    width: 100%;
    box-sizing: border-box;
}
 
.weui-grid__icon {
    width: 32px;
    height: 32px;
    margin: 0 auto;
}
 
 
.weui-grid__icon image {
    display: block;
    width: 100%;
    height: 100%;
}
 
.weui-grid__icon + .weui-grid__label {
    margin-top: 5px;
}
 
 
.weui-grid__label {
    display: block;
    text-align: center;
    font-weight: bold;
    color: #000;
    font-size: 14px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}


.content {
  display: flex; /*显示方式为flex*/
  flex-direction: row; /*布局方式为水平*/
  justify-content: space-around; /*位置平分*/
  margin-top: 25rpx;
}
 
.item {
  width: 100rpx;
  height: 100rpx;
  background-color: skyblue;
  border-radius: 50%; /*圆角*/
  text-align: center;
  line-height: 100rpx;
  font-family: 宋体;
  font-size: 35rpx;
  }