Java Script

原创:新手布局福音!微信小程序使用flex的一些基础样式属性

对着背影说爱祢 提交于 2020-03-25 19:57:15
3 月,跳不动了?>>> Flex布局相对于以前我们经常所用到的布局方式要好的很多,在做微信小程序的时候要既能符合微信小程序的文档开发要求,又能使用不同以往的居中方式并减少css的相关样式声明。 先来看看关于flex的一张图: 从上面可以看到一些flexbox的相关信息, main axis 和 cross axis 指的是flexbox内部flex项目(flex item)的排列方向,通俗点说就是,里面的flex项目是按照横轴或者纵轴排列的顺序方向。 main start 和 main end 是指项目的开始和项目的结束是按照排列方向的起点和终点。 再来看看flex的相关属性: 我们给定一个结构: <div class="container"> <div class="item1"></div> <div class="item2"></div> <div class="item3"></div> ... </div> 在微信小程序里面可以是这样的结构: <view class="container"> <view class="item1"></view> <view class="item2"></view> <view class="item3"></view> ... </view> 当我们要用时这个布局的时候对于外层的结构,我们对他的css样式设定: <style

原创:微信小程序源码解说:石头剪刀布(附源码下载)

江枫思渺然 提交于 2019-12-03 22:21:50
昨天看有个石头剪刀布的练习,就拿出来做了一下,布局的代码浪费了很多时间,果然CSS这块的还不是很熟练,下面直接上图上代码了。 JS: var numAi = 0 var timer Page({ data:{ //控制按钮是否可点击 btnState:false, //记录获胜次数 winNum:0, //中间的话“Ho~ You Win” gameOfPlay:'', //用户选择的图片 imageUserScr:'/pages/image/wenhao.png', //电脑随机的图片 imageAiScr:'', //石头剪刀布图片数组 srcs:[ '/pages/image/shitou.png', '/pages/image/jiandao.png', '/pages/image/bu.png' ] }, //生命周期,刚进来 onLoad: function () { //获取本地缓存“已经获胜的次数” var oldWinNum = wx.getStorageSync('winNum'); //如果有缓存,那么赋值,否则为0 if(oldWinNum != null && oldWinNum !=''){ this.data.winNum = oldWinNum; } this.timerGo(); }, //点击按钮 changeForChoose(e){