【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; }
|
请发表评论