小程式普通佈局
阿新 • • 發佈：2018-11-20
WXML
<view class='newindex'> <view class='banner'> </view> <view class='together'> <view class='title'>列表</view> <view class='tvs'> <view class='titem'></view> <view class='titem'></view> <view class='titem'></view> <view class='titem'></view> <view class='titem'></view> </view> </view> <view class='mainactive'> <view class='ml'></view> <view class='mr'> <view class='mrt'></view> <view class='mrb'></view> </view> </view> <view class='activelook'> <view class='altitle'>列表</view> <view class='actives'> <view class='month'> </view> </view> </view> </view>
WXSS
page{width: 100%;height: 100%;display: flex;flex-direction: column;} .newindex{width:95%;height:100%;margin: 0 2.5%;} .banner{height: 122px;width: 100%;background:#b5b5b5;border-radius: 5px;} .together .title{height:39px;font-size: 15px;color: #000;font-weight: bold;line-height: 39px;} .together .tvs{display: flex;justify-content: space-between;} .together .tvs .titem{height: 46px;width: 46px;background: #b5b5b5;border-radius: 5px;} .mainactive{height: 148px;width: 100%;margin-top: 22px;margin-bottom: 5px; display: flex;justify-content: space-between;} .mainactive .ml{width: 149px;background: #b5b5b5;border-radius:5px 0 0 5px;} .mainactive .mr{width: 149px;display: flex;flex-direction: column;justify-content: space-between;} .mainactive .mr .mrt{background: #b5b5b5;height: 71px;border-radius: 0 5px 5px 0;} .mainactive .mr .mrb{background: #b5b5b5;height: 71px;border-radius: 0 5px 5px 0;} .activelook .altitle{height: 36px;line-height: 36px;color: #000;font-weight: bold;font-weight: bold;} .activelook .actives .month{height:76px;width: 100%;background: #b5b5b5;border-radius: 5px;}
WXML
<view class='detail'> <view class='bigactive'> <view class='baimg'></view> <view class='bitem'> <view class='bhead'> </view> <view class='binfo'> <view class='bifm'>大標題</view> <view class='bifi'> <view class='label'>標籤</view> <view class='label'>標籤</view> <view class='label'>標籤</view> </view> </view> <view class='blike'> <view class='icon'>心</view> <view class='ifon'>喜歡</view> </view> </view> </view> <view class='moreactive'> <view class='mitem' wx:for="{{3}}" wx:key="*this"> <view class='mit'></view> <view class='mib'> <view class='mibhead'></view> <view class='mibwrite'> <view class='head'>小標題</view> <view class='content'>內容內容內容內容內容</view> </view> </view> </view> </view> </view>
WXSS
page{width: 100%;height: 100%;}
page .detail{width: 100%;display: flex;flex-direction: column;background: #eeeeee;}
.detail .bigactive{padding-top:23px;width:95%;padding: 0 2.5%;background: #ffffff;}
.detail .bigactive .baimg{height: 183px;width: 100%;background: #b5b5b5;border-radius: 4px;}
.detail .bigactive .bitem{display: flex;padding: 8px 0;}
.detail .bigactive .bitem .bhead{width: 45px;height: 45px;border-radius: 50%;background: #b5b5b5;margin-right: 13px;}
.detail .bigactive .bitem .binfo{flex: 1;}
.detail .bigactive .bitem .binfo .bifm{font-size: 12px;font-weight: bold;height: 28px;line-height: 28px;}
.detail .bigactive .bitem .binfo .bifi{height: 18px;display: flex;}
.detail .bigactive .bitem .binfo .bifi .label{width: 43px;height:13px;border-radius: 5px;font-size: 10px;color:#fff;background: #a9d2fe;text-align: center;margin-right: 2px;line-height: 13px;}
.detail .bigactive .bitem .blike{width: 40px;display: flex;flex-direction: column;}
.detail .bigactive .bitem .blike .icon{height: 28px;text-align: center;line-height: 28px;}
.detail .bigactive .bitem .blike .ifon{ font-size: 10px;color: #e6e6e6;text-align: center;}
.detail .moreactive{flex:1;margin: 0 5px;display: flex;flex-wrap: wrap;justify-content: space-between;margin-top: 8px;background:#fff;}
.detail .mitem{padding: 0 2px;width: 48.6%;margin: 10px 0px;}
.detail .mitem .mit{background: #b5b5b5;height: 154px;width: 100%;border-radius: 5px;}
.detail .mitem .mib{display: flex;margin-top: 10px;}
.detail .mitem .mib .mibhead{flex: 1.7;width: 26px;height:26px;background: #b5b5b5;border-radius: 50%;margin-right: 6px;}
.detail .mitem .mib .mibwrite{flex: 8.3;}
.detail .mitem .mib .mibwrite .head{font-size: 13px;font-weight: bold;}
.detail .mitem .mib .mibwrite .content{font-size: 10px;color: #b5b5b5;}
WXML
<view class='newdetail'>
<view class='active'>
<view class='activeimg'></view>
<view class='text'>
<view class='title'>主題</view>
<view class='content'>簡要內容簡要內容簡要內容簡要內容</view>
<view class='info'>
<view class='money'>￥<text>1888</text>元</view>
<view class='state'>報名進行中</view>
</view>
</view>
</view>
<view class='mechanism'>
<view class='mtitle'>機構</view>
<view class='mitem'>
<view class='mhead'></view>
<view class='minfo'>
<view class='mititle'>機構</view>
<view class='micontent'>xxxxxxxxxxxxxxxxx</view>
</view>
</view>
</view>
<view class='selector'>
<view class='item'>
<view class='special'>產品特色</view>
<view class='arrange'>行程安排</view>
<view class='costinfo'>費用內容</view>
<view class='notes'>活動須知</view>
</view>
</view>
</view>WXSS
.newdetail{width: 100%;height: 100%;display: flex;flex-direction: column;}
.active{border-bottom: 5px solid #eeeeee;}
.activeimg{height: 190px;background: #b5b5b5;width: 100%;}
.text{margin: 5px 9px;}
.text .title{font-size: 14px;font-weight: bold;margin-top: 7px;}
.text .content{font-size: 10px;color: #b5b5b5;}
.text .info{display: flex;margin-top: 8px;}
.text .info .money{font-size: 12px;font-weight: bold;flex: 5;}
.text .info .state{font-size: 10px;font-weight: bold;flex: 1;}
.mechanism{border-bottom: 5px solid #eeeeee;}
.mtitle{margin:0 5px;height: 27px;font-size: 10px;color: #828282;line-height: 27px;}
.mitem{margin:0 5px 6px 5px;display: flex;}
.mhead{width: 52px;height: 52px;background: #b5b5b5;border-radius: 5px;margin-right: 4px;}
.minfo .mititle{font-size: 13px;font-weight: bold;height: 26px;line-height: 26px;}
.minfo .micontent{font-size: 10px;color: #b5b5b5;}
.selector .item{display: flex;}
.item view{flex: 1;height: 23px;line-height: 23px;text-align: center;font-size: 12px;color: #cdcdcd;}
.item view:nth-child(1){font-weight: bold;color: #000;}
WXML
<view class="pack">
<!-- 綠色頭部 -->
<view class='head'>
<view class='headper'>
<view class='headimg'>
<!-- 如果只是展示使用者頭像暱稱，可以使用 <open-data /> 元件 -->
<open-data type="userAvatarUrl"></open-data>
</view>
</view>
<view class='info'>
<view class='infoitem'>
<view class='names'>MR.
<open-data type="userNickName"></open-data>
</view>
</view>
<view class='infoitem'>
<view class='level'>lv.4</view>
</view>
<view class='infoitem'>
<view class='score'>個人積分：1000</view>
</view>
</view>
</view>
<view class='chengzhang'>
<view class='top'>
<view class='item'></view>
<view class='text'>成長體系</view>
</view>
<view class='bottom'>
<view class='levelpoint'></view>
<view class='levelpoint'></view>
<view class='levelpoint'></view>
<view class='levelpoint'></view>
<view class='levelpoint'></view>
<view class='levelpoint'></view>
<view class='levelpoint'></view>
</view>
</view>
<view class='block'>
<view class='pice'>
<view class='item'></view>
<view class='text'>我的活動值</view>
</view>
<view class='pice'>
<view class='item'></view>
<view class='text'>我的預約</view>
</view>
<view class='pice'>
<view class='item'></view>
<view class='text'>默認個人資訊</view>
</view>
</view>
<view class='block'>
<view class='pice'>
<view class='item'></view>
<view class='text'>使用幫助</view>
</view>
<view class='pice'>
<view class='item'></view>
<view class='text'>關於我們</view>
</view>
<view class='pice'>
<view class='item'></view>
<view class='text'>聯絡客服</view>
</view>
</view>
</view>WXSS
.head {
width: 100%;
height: 114px;
background: #84ccc9;
border-bottom: 3px solid #ebebeb;
padding: 21px 30px;
box-sizing: border-box;
display: flex;
}
.head .headper {
flex: 1;
}
.head .headper .headimg {
width: 55px;
height: 55px;
background: #000;
border-radius: 50%;
border: 2px solid #fff;
overflow: hidden;
}
.head .info {
flex: 1;
display: flex;
flex-direction: column;
}
.info .infoitem {
flex: 1;
}
.infoitem .names {
float: right;
font-weight: bold;
color: #fff;
}
.infoitem .level {
float: right;
font-size: 10px;
border: 1px solid #fff;
border-radius: 5px;
color: #fff;
padding: 0px 7px;
}
.infoitem .score {
float: right;
font-size: 10px;
color: #fff;
}
.chengzhang {
height: 86px;
border-bottom: 5px solid #eee;
padding: 0 21px;
}
.chengzhang .top {
height: 23px;
padding-top: 19px;
display: flex;
}
.chengzhang .top .text {
font-size: 12px;
margin-left: 12px;
margin-top: 2px;
font-weight: bold;
}
.chengzhang .top .item {
width: 23px;
height: 23px;
background: #aaa;
}
.chengzhang .bottom {
margin: 0 38px;
height: 44px;
display: flex;
align-items: center;
}
.chengzhang .bottom .levelpoint {
flex: 1;
height: 9px;
border: 1px solid #ccc;
}
.block {
border-bottom: 7px solid #eee;
}
.pice {
height: 35px;
border-bottom: 1px solid #f5f5f5;
display: flex;
align-items: center;
padding: 0 21px;
}
.pice .text {
font-size: 12px;
margin-left: 12px;
font-weight: bold;
}
.pice .item {
width: 23px;
height: 23px;
background: #aaa;
}
WXML
<view class='zong'>
<view class='top'>
<canvas canvas-id="myCanvas" class='mycanvas'></canvas>
</view>
<view class='bottom'>
<view class='btop'>
<view class='btitem'>
<view class='btit'>akoksk</view>
<view class='btib'>1000</view>
</view>
<view class='btitem'>
<view class='btit'>akoksk</view>
<view class='btib'>1000</view>
</view>
<view class='btitem'>
<view class='btit'>akoksk</view>
<view class='btib'>1000</view>
</view>
</view>
<view class='bbtm'>
<view class='bbl'>
<view class='bbli'>
<view class='bblit'>XXXXXXX</view>
<view class='bblib'>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</view>
</view>
<view class='bbli'>
<view class='bblit'>XXXXXXX</view>
<view class='bblib'>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</view>
</view>
</view>
<view class='bbr'>
<view class='bbri'>
<view class='bbrit'>XXXXXXX</view>
<view class='bbrib'>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</view>
</view>
<view class='bbri'>
<view class='bbrit'>XXXXXXX</view>
<view class='bbrib'>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</view>
</view>
</view>
</view>
</view>
</view>
WXSS
page{width: 100%;height: 100%;background: #eeeff3;overflow: hidden;}
.zong{display: flex;flex-direction: column;width: 100%;height: 100%;}
.zong .top{height: 186px;width: 90%;margin:0 5%;}
.zong .mycanvas{width: 100%;height: 186px;background: #fff;border-radius:7px 7px 0px 0px;
margin-top: 4px;box-sizing: border-box;}
.zong .bottom{background: #6673ff;flex: 1;}
.bottom .btop{width: 90%;margin:0 auto;height: 77px;border-radius:0px 0px 7px 7px;background: #ffffff;
display: flex;}
.bottom .btop .btitem{flex: 1;text-align: center;font-size: 12px;}
.bottom .btop .btitem .btit{height: 33px;line-height: 33px;color: #e6e7ea;}
.bottom .btop .btitem .btib{font-weight: bold;}
.bottom .bbtm{width: 90%;margin:0 auto;height: 100%;display: flex;margin-top: 29px;}
.bottom .bbtm .bbl{width:50%;box-sizing: border-box; display: flex;flex-direction: column;color: #fff;border-right: 2px solid #616ef3;padding-right: 25px;}
.bottom .bbtm .bbr{width:50%;box-sizing: border-box; display: flex;flex-direction: column;color: #fff;padding-left: 25px;}
.bottom .bblib{font-size: 10px;margin-top: 10px;margin-bottom: 35px;height: 60px;word-wrap:break-word;}
.bottom .bbrib{font-size: 10px;margin-top: 10px;margin-bottom: 35px;height: 60px;word-wrap:break-word;}
JS
Page({
data: {
shezhi: [0.5, 0.2, 0.7, 0.4, 0.6, 0.8, 0.1]
},
//畫圖函式
han: function () {
const ctx = wx.createCanvasContext('myCanvas')
var x = 145, y = 90;
var r = 58;//圓和正六邊形 都是一樣的半徑長度 半徑是不變的 根據給的資料不同 用半徑乘以百分比 用同樣的方式可求不同的座標點
//呼叫函式畫三條邊
this.liubianxing(x,y,r,1, ctx);
this.wenzi(x,y,r,1,ctx);
this.liubianxing(x,y,r,2/3,ctx);
this.liubianxing(x,y,r,1/3,ctx);
this.zhixian(x,y,r,1,ctx);
this.dongtai(x,y,r,this.data.shezhi, ctx);
//畫
ctx.draw()
},
liubianxing: function (x,y,r,bei,ctx){
var z1x = x + bei *r * Math.sin(60 * 2 * Math.PI / 360);//角度 乘以2 乘以PI 比上360 就是弧度
var z1y = y - bei *r * Math.cos(60 * 2 * Math.PI / 360);
var z2x = x + bei *r * Math.sin(120 * 2 * Math.PI / 360);
var z2y = y - bei *r * Math.cos(120 * 2 * Math.PI / 360);
var z3x = x + bei *r * Math.sin(180 * 2 * Math.PI / 360);
var z3y = y - bei *r * Math.cos(180 * 2 * Math.PI / 360);
var z4x = x + bei *r * Math.sin(240 * 2 * Math.PI / 360);
var z4y = y - bei *r * Math.cos(240 * 2 * Math.PI / 360);
var z5x = x + bei *r * Math.sin(300 * 2 * Math.PI / 360);
var z5y = y - bei *r * Math.cos(300 * 2 * Math.PI / 360);
var z6x = x + bei *r * Math.sin(360 * 2 * Math.PI / 360);
var z6y = y - bei *r * Math.cos(360 * 2 * Math.PI / 360);
ctx.save()
ctx.beginPath()
ctx.moveTo(z1x, z1y)
ctx.lineTo(z2x, z2y)
ctx.lineTo(z3x, z3y)
ctx.lineTo(z4x, z4y)
ctx.lineTo(z5x, z5y)
ctx.lineTo(z6x, z6y)
ctx.closePath()
ctx.setStrokeStyle('#eeeeee')//畫出當前路徑的邊框顏色
ctx.stroke()//描邊當前路徑
},
wenzi: function (x,y,r,bei, ctx){
var z1x = x + bei * r * Math.sin(60 * 2 * Math.PI / 360);//角度 乘以2 乘以PI 比上360 就是弧度
var z1y = y - bei * r * Math.cos(60 * 2 * Math.PI / 360);
var z2x = x + bei * r * Math.sin(120 * 2 * Math.PI / 360);
var z2y = y - bei * r * Math.cos(120 * 2 * Math.PI / 360);
var z3x = x + bei * r * Math.sin(180 * 2 * Math.PI / 360);
var z3y = y - bei * r * Math.cos(180 * 2 * Math.PI / 360);
var z4x = x + bei * r * Math.sin(240 * 2 * Math.PI / 360);
var z4y = y - bei * r * Math.cos(240 * 2 * Math.PI / 360);
var z5x = x + bei * r * Math.sin(300 * 2 * Math.PI / 360);
var z5y = y - bei * r * Math.cos(300 * 2 * Math.PI / 360);
var z6x = x + bei * r * Math.sin(360 * 2 * Math.PI / 360);
var z6y = y - bei * r * Math.cos(360 * 2 * Math.PI / 360);
//繪製文字 //文字放在beginpath 和 closepath之中 字型就不會染上外面的顏色
ctx.setFontSize(15)
ctx.fillText('學習', z1x + 5, z1y)
ctx.fillText('音樂', z2x + 5, z2y)
ctx.fillText('美術', z3x - 20, z3y + 15)
ctx.fillText('體育', z4x - 40, z4y)
ctx.fillText('電腦', z5x - 40, z5y)
ctx.fillText('英語', z6x - 15, z6y - 5)
ctx.closePath()
ctx.setStrokeStyle('#eeeeee')//畫出當前路徑的邊框顏色
ctx.stroke()//描邊當前路徑
},
zhixian:function(x,y,r,bei,ctx){
var z1x = x + bei * r * Math.sin(60 * 2 * Math.PI / 360);//角度 乘以2 乘以PI 比上360 就是弧度
var z1y = y - bei * r * Math.cos(60 * 2 * Math.PI / 360);
var z2x = x + bei * r * Math.sin(120 * 2 * Math.PI / 360);
var z2y = y - bei * r * Math.cos(120 * 2 * Math.PI / 360);
var z3x = x + bei * r * Math.sin(180 * 2 * Math.PI / 360);
var z3y = y - bei * r * Math.cos(180 * 2 * Math.PI / 360);
var z4x = x + bei * r * Math.sin(240 * 2 * Math.PI / 360);
var z4y = y - bei * r * Math.cos(240 * 2 * Math.PI / 360);
var z5x = x + bei * r * Math.sin(300 * 2 * Math.PI / 360);
var z5y = y - bei * r * Math.cos(300 * 2 * Math.PI / 360);
var z6x = x + bei * r * Math.sin(360 * 2 * Math.PI / 360);
var z6y = y - bei * r * Math.cos(360 * 2 * Math.PI / 360);
//畫直線
ctx.beginPath()
ctx.moveTo(x,y)
ctx.lineTo(z1x, z1y)
ctx.closePath()
ctx.setStrokeStyle('#eeeeee')//畫出當前路徑的邊框顏色 要先寫顏色在寫描邊,否則出不來
ctx.stroke()//描邊當前路徑
ctx.beginPath()
ctx.moveTo(x, y)
ctx.lineTo(z2x, z2y)
ctx.closePath()
ctx.setStrokeStyle('#eeeeee')
ctx.stroke()
ctx.beginPath()
ctx.moveTo(x, y)
ctx.lineTo(z3x, z3y)
ctx.closePath()
ctx.setStrokeStyle('#eeeeee')
ctx.stroke()
ctx.beginPath()
ctx.moveTo(x, y)
ctx.lineTo(z4x, z4y)
ctx.closePath()
ctx.setStrokeStyle('#eeeeee')
ctx.beginPath()
ctx.moveTo(x, y)
ctx.lineTo(z5x, z5y)
ctx.closePath()
ctx.setStrokeStyle('#eeeeee')
ctx.stroke()
ctx.beginPath()
ctx.moveTo(x, y)
ctx.lineTo(z6x, z6y)
ctx.closePath()
ctx.setStrokeStyle('#eeeeee')
ctx.stroke()
},
dongtai:function(x,y,r,ic,ctx){
var z1x = x + ic[0] * r * Math.sin(60 * 2 * Math.PI / 360);//角度 乘以2 乘以PI 比上360 就是弧度
var z1y = y - ic[0] * r * Math.cos(60 * 2 * Math.PI / 360);
var z2x = x + ic[1] * r * Math.sin(120 * 2 * Math.PI / 360);
var z2y = y - ic[1] * r * Math.cos(120 * 2 * Math.PI / 360);
var z3x = x + ic[2] * r * Math.sin(180 * 2 * Math.PI / 360);
var z3y = y - ic[2] * r * Math.cos(180 * 2 * Math.PI / 360);
var z4x = x + ic[3] * r * Math.sin(240 * 2 * Math.PI / 360);
var z4y = y - ic[3] * r * Math.cos(240 * 2 * Math.PI / 360);
var z5x = x + ic[4] * r * Math.sin(300 * 2 * Math.PI / 360);
var z5y = y - ic[4] * r * Math.cos(300 * 2 * Math.PI / 360);
var z6x = x + ic[5] * r * Math.sin(360 * 2 * Math.PI / 360);
var z6y = y - ic[5] * r * Math.cos(360 * 2 * Math.PI / 360);
ctx.restore()
ctx.beginPath()
ctx.moveTo(z1x, z1y)
ctx.lineTo(z2x, z2y)
ctx.lineTo(z3x, z3y)
ctx.lineTo(z4x, z4y)
ctx.lineTo(z5x, z5y)
ctx.lineTo(z6x, z6y)
ctx.closePath()
ctx.setStrokeStyle('#eeeeee')//畫出當前路徑的邊框顏色
ctx.stroke()//描邊當前路徑
// Create linear gradient動態漸變
const grd = ctx.createLinearGradient(0, 0, 200, 0)
grd.addColorStop(0, '#657efd')
grd.addColorStop(1, '#a988fd')
ctx.setFillStyle(grd)
ctx.fill()
},
goStart: function () {
},
onLoad: function () {
this.han()
var that = this;
setInterval(function () {
// console.log(Math.random())
const ctx = wx.createCanvasContext('myCanvas')
var x = 145, y = 90;
var r = 58;
var mm = Math.random()
var hh = [Math.random(), Math.random(), Math.random(), Math.random(), Math.random(), Math.random(), Math.random(), Math.random()]
that.dongtai(x, y, r, hh, ctx);
//ctx.draw() //這個註釋開啟即可隨機生成中間資料畫圖 但會覆蓋背景
}, 500)
}
})