精华内容
下载资源
问答
  • 段时间小程序上线后就弃坑了,回到网页开发去了,最近又有新项目,再次入坑,难免需要一些demo来重新熟悉,在这个过程中,发现demo中很少有人使用flex布局,今天给大伙稍微讲一下这个布局。  flex布局有啥用呢,...
  • 微信小程序居中 1、子控件水平垂直居中 display: flex; align-items: center; justify-content: center; width: 100%; height: 400px //注意:这里的 height 写 100%会使得垂直居中可能会不生效 2、 微信小...

    微信小程序居中、居右、横纵布局

    1、相对父类控件水平垂直居中

    方式一:水平垂直居中

    父类控件:

      display: flex;
      align-items: center;//子控件垂直居中
      justify-content: center;//子控件水平居中
      width: 100%;
      height: 400px
      //注意:这里的 height 写 100%会使得垂直居中可能会不生效
    

    可能会有兼容问题

    方式二:水平垂直居中(方式二推荐)

    父类控件:position: relative;
    子类控件:

    	position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        top:0;
        margin: auto;
    

    方式三:水平垂直居中(方式三推荐)

    父类控件:

    	display: table-cell;
        vertical-align: middle;
    

    子类控件:margin:0 auto;

    方式四:水平垂直居中

    父类控件:position:relative;
    子控件:

    	position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
    

    可能会有兼容性问题

    水平居中A:相对父类控件

    	margin: 0 auto;
      	text-align: center;
    

    水平居中B、相对父类控件–子控件绝对定位

    需要知道控件的宽高,-100rpx为自身宽高(200)的一半

    width: 200rpx;
      height: 200rpx;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -100rpx;
      margin-left: -100rpx;
    

    水平居中C、相对父类控件(水平)居中

    父类:text-align:center;
    子类:display:inline/inline-block;

    2、微信小程序横向布局、纵向布局

    横向布局
    display: flex;
    flex-direction: row;
    
    纵向布局
    display: flex;
    flex-direction: column;
    

    3、控件居右

    父类控件中

    position: relative; /*父元素位置要设置为相对*/
    

    (第一种居右方法)子类控件居右显示

    position: absolute; /* 相对relative也可以 */
    right: 0; /* 靠右调节 */
    margin-right: 35rpx
    

    (第二种居右方法)只在子类控件中加入

      position: fixed;
      right: 0;
    

    (第三种居右方法)

    float: right;
    

    (第四种居右方法)父类控件

    	display:flex;
      justify-content:flex-end;
    

    子类控件水平居中显示

    position: absolute; 
    right:40%;
    left:40%;
    

    子类控件底部显示一

    position: fixed;
    bottom: 20rpx;
    

    子类控件底部显示二

    //父类
    position: relative;
    //子类
    position: absolute;
    bottom: 0;
    

    居底的还可以看看另一篇文章:底部购物车

    4、文字在图片中间

    效果图:
    在这里插入图片描述
    瘦身燃脂 这四个字就是在图片的正中间

    代码

    wxml

    <view class='container'>
    
      <view class="view_1">
        <image class="image_1" src="../images/jiaocheng1.jpg"></image>
        <text class="text_1">瘦身燃脂</text>
      </view>
    
    
    </view>
    

    wxss

    .view_1 {
      position: relative
    }
    
    .image_1 {
    }
    
    .text_1 {
      width: 100px;
      height: 24px;  
      position: absolute;
      left: 0;
      top: 0px;
      right: 0;
      bottom: 0;
      margin: auto;
      text-align: center;
    } 
    

    5、网格布局

    效果图:
    在这里插入图片描述
    wxss代码:

      display: grid;
      width: 100%;
      overflow-x: hidden;
      /* 设置列、行大小 fr单位是等分分配列空间 4列,如果要3列,删除一个1fr*/
      grid-template-columns: 1fr 1fr 1fr 1fr;
      /* grid-template-rows: 100rpx 100rpx; */
      /* 有多余数据时,自动添加新行时默认行高为:200rpx */
      grid-auto-rows: 100rpx;
      /* 设置网格线大小 */
      /* grid-gap: 10rpx; */
    
    展开全文
  • .cornerbutton{ width:260rpx; border-radius:30px; background:#35c2bc; color:white; border:none; } <buttonclass="cornerbutton">添加</button>

    .cornerbutton {

        width: 260rpx;

        border-radius: 30px;

        background: #35c2bc;

        color: white;

        border: none; 

    }

     

      <button class="cornerbutton"> 添加 </button>

    展开全文
  • 微信小程序居中代码

    2017-10-25 15:40:00
    html页面: {  text-align:center; } wxss页面: {  width: 100%;  height: 100%;  display: flex;  justify-content: center; } 转载于:...

    html页面:

    {

      text-align:center;

    }

    wxss页面:

    {

      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;

    }

    转载于:https://www.cnblogs.com/moguzi12345/p/7729190.html

    展开全文
  • 微信小程序适配canvas大小位置居中

    千次阅读 2019-07-21 20:56:07
    canvas适配微信小程序居中绘制 通过微信wx.getSystemInfo获取屏幕宽度进行对canvas绘制,参考了https://blog.csdn.net/qq_33529011/article/details/80915414进行制作 js部分: onReady: function () { //微信...

    canvas适配微信小程序居中绘制

    在这里插入图片描述
    通过微信wx.getSystemInfo获取屏幕宽度进行对canvas绘制,参考了https://blog.csdn.net/qq_33529011/article/details/80915414进行制作

    js部分:

     onReady: function () {
            //微信获取屏幕函数
            wx.getSystemInfo({
              success: function(res) {
                //正方形宽高比一样
                let annulusHeight = Math.round(res.screenWidth * 0.68) //0.68canva占地比
                console.log(annulusHeight)
              }
            })
          },
    

    html部分

    <canvas style="width: {{annulusHeight}}px; height: {{annulusHeight}}px" class="bgCanvas" canvas-id="bgCanvas"></canvas>
    

    进行了简单的封装可以方便调用

    参数类型是对象,分别是文字内容,大小,颜色,x轴,y轴位置,最后一个是canvas模板时画板的大小

    font2: function (tscxyr){
        let annulusHeight = this.data.annulusHeight;
        let { text, size, color, x, y, screen } = tscxyr;
        ctx.font = `${Math.round(annulusHeight * size / screen)}px bold 黑体`;
        ctx.fillStyle = color;
        ctx.textAlign = "center";
        ctx.textBaseline = "middle";
        ctx.fillText(`${text}`, `${Math.round(annulusHeight * x / screen)}`, `${Math.round(annulusHeight * y / screen)}`);
      },
    

    下面是全部代码有需要的小伙伴可以参考一下(还未封装)

    // pages/index2/index2.js
    const ctx = wx.createCanvasContext("bgCanvas")
    Page({
    
      /**
       * 页面的初始数据
       */
      data: {
        annulusHeight: 0,
        brAnnulus: 92,
        bedState: '在床',  
      },
    
      /**
       * 生命周期函数--监听页面初次渲染完成
       */
      onReady: function () {
        let that = this;
        //微信获取屏幕函数
        wx.getSystemInfo({
          success: function(res) {
            //正方形宽高比一样
            let annulusHeight = Math.round(res.screenWidth * 0.68) //0.68canva占地比
            console.log(annulusHeight)
    
            // 文字部分18号
            ctx.font = `${Math.round(annulusHeight * 0.082569)}px bold 黑体`;
            // 设置颜色
            ctx.fillStyle = "white";
            // 设置水平对齐方式
            ctx.textAlign = "center";
            // 设置垂直对齐方式
            ctx.textBaseline = "middle";
            // 绘制文字(参数:要写的字,x坐标,y坐标)
            ctx.fillText("实施心率", `${Math.round(annulusHeight * 0.4954)}`, `${Math.round(annulusHeight * 0.22936)}`);
          
            that.setData({
              annulusHeight: annulusHeight
            })
          }
        })
        this.font();
        this.annulus();
      },
    
      annulus: function () {
        let brAnnulus = this.data.brAnnulus;
        let annulusHeight = this.data.annulusHeight;
        let circleCenter = annulusHeight / 2;
        let circleR = circleCenter * 0.9;
    
        brAnnulus = (brAnnulus / 150) * 2 * Math.PI;
        //圆环
        ctx.setLineWidth(16)
        ctx.arc(circleCenter, circleCenter, circleR, 0, 2 * Math.PI);
        ctx.setStrokeStyle('white')
        ctx.stroke()
    
        ctx.beginPath()
        ctx.setLineCap('round')
        ctx.setLineWidth(10)
        ctx.arc(circleCenter, circleCenter, circleR, 0, brAnnulus, false)
        ctx.setStrokeStyle('green')
        ctx.stroke()
        ctx.draw()
      },
    
      font: function() {
        let annulusHeight = this.data.annulusHeight;
        let brAnnulus = this.data.brAnnulus;
        let f108 = Math.round(annulusHeight * 0.4954);
        let bedState = this.data.bedState;
    
        ctx.font = `${Math.round(annulusHeight * 0.2752)}px bold 黑体`;
        ctx.fillStyle = "#c2c6e9";
        ctx.textAlign = "center";
        ctx.textBaseline = "middle";
        ctx.fillText(`${brAnnulus}`, `${f108}`, `${Math.round(annulusHeight * 0.4587)}`);
    
        ctx.font = `${Math.round(annulusHeight * 0.1)}px bold 黑体`;
        ctx.fillStyle = "#08c87d";
        ctx.textAlign = "center";
        ctx.textBaseline = "middle";
        ctx.fillText(`${bedState}`, `${f108}`, `${Math.round(annulusHeight * 0.688)}`);
      }
    })
    
    展开全文
  • 小程序组件居中问题

    千次阅读 2017-08-26 16:29:23
    小程序中实现居中的功能是经常用到的,比如在text组件中让文本内容在竖直(水平)方向自动居中、让图片显示在页面的中央等。使用弹性布局flex可以轻松搞定。对容器的display设为flex,如display:flex利用水平方向...
  • 有2种方式设置一个容器的元素垂直居中:第1种.container {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%); /* 向左向上平移自身宽高的50% */}第2种.container {position: fixed;height: ...
  • 微信小程序文本居中

    千次阅读 2021-01-08 14:14:27
    .myText{ display: flex; align-items: center;/* 垂直居中 */ justify-content: center;/* 水平居中 */ width: 200rpx; height: 200rpx; }
  • 微信小程序view居中问题

    万次阅读 2019-02-20 15:06:46
    只需要在wxss里,给需要居中的地方加上以下样式: display: flex; align-items: center; justify-content: center; 如果加上之后还居中不了,就给它的width属性和height属性加上具体的值,例如: width:...
  • 微信小程序水平居中,垂直居中

    万次阅读 2017-09-19 14:48:06
    display: flex;//必须有,不然没有效果 justify-content: center; align-items: center;

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 59,184
精华内容 23,673
关键字:

小程序居中