精华内容
下载资源
问答
  • 微信小程序文本居中

    千次阅读 2021-01-08 14:14:27
    .myText{ display: flex; align-items: center;/* 垂直居中 */ justify-content: center;/* 水平居中 */ width: 200rpx; height: 200rpx; }
    .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:...

    只需要在wxss里,给需要居中的地方加上以下样式:

      display: flex;
      align-items: center;
      justify-content: center; 
    

    如果加上之后还居中不了,就给它的width属性和height属性加上具体的值,例如:

      width:200px; 
      height:200px;
    
    展开全文
  • 微信小程序滚动居中导航选项卡

    千次阅读 2019-02-11 16:33:36
    微信小程序头部导航经常会用到选项卡,一个会自动居中的选项卡的体验会比普通的选项卡要好很多。 效果示意图: 被选中的tab会始终居中显示。 利用微信小程序自带的组件scroll-view的scroll-left就很容易实现...

    微信小程序头部导航经常会用到选项卡,一个会自动居中的选项卡的体验会比普通的选项卡要好很多。

    效果示意图:

    被选中的tab会始终居中显示。

    利用微信小程序自带的组件scroll-view的scroll-left就很容易实现这个效果。

    wxml代码:

    <!-- 遮罩层 -->
        <image wx:if="{{showMaskScroll}}" class='mask-scroll' src='../../static/images/slidemunu-r.png'></image>
        <scroll-view scroll-x="true" class="nav {{showScroll ? 'showScroll' : ''}} " scroll-left="{{navScrollLeft}}" scroll-with-animation="{{true}}" scroll-into-view="{{toView}}" bindscrolltoupper="stopTimer" bindscroll="stopNewTimer">
          <block wx:for="{{navData}}" wx:for-index="idx" wx:for-item="navItem" wx:key="idx">
            <view id="navItem{{idx}}" class="nav-item navItem{{idx}} {{currentTab == idx ?'active':''}}" data-current="{{idx}}" data-id="{{navItem.id}}" data-url="{{navItem.cat_url}}" data-name="{{navItem.cat_name}}" bindtap="switchNav" style="margin-right:{{idx==navData.length-1?'60rpx':'0rpx'}};">
              {{navItem.cat_name}}
              <image class='hot' src='../../static/images/icon/icon_hot.png' wx:if="{{navItem.is_recommend == 1}}"></image>
            </view>
          </block>
          <view class='slideLine' style="width:{{slideWidth}}px;left:{{sliedeLeft}}px;"></view>
        </scroll-view>

    遮罩层是右边提示可以滑动的一个遮罩图。

    wxss代码:

    /* 顶部导航条 */
    
    .nav {
      height: 100rpx;
      width: 630rpx;
      position: relative;
      box-sizing: border-box;
      overflow: hidden;
      font-size: 0;
      line-height: 100rpx;
      white-space: nowrap;
      opacity: 0;
      transition: all 300ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
    }
    
    .nav.showScroll {
      opacity: 1;
    }
    
    .slideLine {
      height: 8rpx;
      /* width: 24px; */
      position: absolute;
      top: 94rpx;
      /* top: 0; */
      background: #e64340;
      transition: all 300ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
    }
    
    .nav-item {
      /* padding: 0 5px; */
      margin: 0 5px;
      position: relative;
      display: inline;
      /* height: 100rpx; */
      text-align: center;
      font-size: 14px;
      color: #666;
      border-bottom: none;
      /* background: green; */
      transition: all 500ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
    }
    
    .nav-item .hot{
      width: 19rpx;
      height: 19rpx;
      position: absolute;
      right: -5rpx;
      top: -5rpx;
    }
    
    .nav-item.active {
      color: #e64340;
      /* height: 94rpx; *//* border-bottom: 8rpx solid #e64340; */
    }
    
    .page-top {
      width: 100%;
      position: relative;
      background: white;
    }
    
    .page-top.top {
      position: fixed;
      top: 0;
      left: 0;
      z-index: 99999;
    }
    
    .search {
      position: absolute;
      right: 30rpx;
      top: 20rpx;
      width: 60rpx;
      height: 60rpx;
      z-index: 999999;
    }
    
    .mask-scroll {
      position: absolute;
      right: 120rpx;
      top: 0;
      width: 45rpx;
      height: 100rpx;
      z-index: 999999;
    }

    js代码:

    data: {
        slideWidth: 38, // 导航滑块长度
        sliedeLeft: 5,  // 导航滑块距离
        showMaskScroll: true,  // 是否显示顶部遮罩
      },
    switchNav(event) {
          let that = this;
          let listLength = that.data.navData.length;
          let cur = home.getDataSet(event, 'current');
          let id = home.getDataSet(event, 'id');
          let name = home.getDataSet(event, 'name');
          let onheadactive = event.currentTarget.offsetLeft; // 元素距离左侧的位置
          let winweight = this.data.windowWidth; // 设备宽度
          let domWidth = ''; // 元素的宽度
          let query = wx.createSelectorQuery();
          query.select('.navItem' + cur).boundingClientRect(function (rect) {
            domWidth = rect.width;
            let distance = onheadactive - winweight / 2 + domWidth / 2;
            let sliedeLeft = onheadactive;
    
            if (sliedeLeft <= 0) {
              sliedeLeft = 0;
            }
    
            console.log('navScrollLeft', distance)
            //tab选项居中                            
            that.setData({
              navScrollLeft: distance,
              slideWidth: domWidth,
              sliedeLeft,
              currentIndex: 0
            })
    
          }).exec();
    
          // 最后一个元素隐藏遮罩层
          if (cur + 1 >= listLength) {
            that.setData({
              showMaskScroll: false
            })
          } else {
            that.setData({
              showMaskScroll: true
            })
          }
      },

     

    展开全文
  • 未经作者授权,禁止转载初识小程序什么是微信小程序微信小程序,小程序的一种,英文名Wechat Mini Program,是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或搜一下即可打开应用...

    “晓程序”

    小程序连载笔记,通俗易懂,欢迎各位转发关注学习。未经作者授权,禁止转载

    初识小程序

    什么是微信小程序

    微信小程序,小程序的一种,英文名Wechat Mini Program,是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或搜一下即可打开应用。

    2017年1月9日,张小龙在2017微信公开课Pro上发布的微信小程序正式上线。

    2019年8月9日,微信向开发者发布新能力公测与更新公告,微信PC版新版本中,支持打开聊天中分享的微信小程序。

    注册小程序账号

    在网页中搜索微信公众平台,点击进入小程序注册页面,按照页面的流程一步步进行注册

    65c56929e39c6981c26362c889f883ba.png

    开发环境准备

    1. 下载开发工具

    • 选择相应的电脑版本进行下载4cc62905bfb65ed7eda71262355cdcfa.png

    获取小程序AppID和AppSecret密钥

    • 登录微信公众平台登录小程序账号

    • 点击开发设置

    5773a26a9e754fdfc91fbf06ab641e80.png

    下载完成之后可以进行登录

    • 登录界面

    273cb99be375ad237aa01dea392e5cf7.png

    • 新增项目,填写刚才获取的AppID,不使用云服务

    737519802dded83d4bd9d979992f3895.png

    • 现在可以正式开发了

    9b39211da18ed48634b973c34de05cc3.png

    第一个小程序

    1. 打开刚才新建的项目

    2. 修改index.wxml中的代码,标签就是显示内容的。

       <view class="usermotto">        <text class="user-motto">第一个小程序text>view>
    3. 完成之后按 Ctrl + S 保存,效果如下

      529903d266c8a309207cc1a371137b90.png

    4. 可以通过点击预览按钮在手机端进行测试

      135bb919cf5ce6c70c2ebf1e6515f5a5.png

    至此,我们已经简单的了解了一个小程序的创建过程,但这还远远不够,还存在着许多的问题。

    例如:

    • 小程序的启动入口在哪里?

    • index.wxml、index.wxss、index.js等文件各自的作用,能否进行重命名?

    • WXML、WXSS文件是什么?

    • 以及创建完成之后如何发布给别人使用?

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

    2021-05-04 00:00:21
    1 有宽高 line-height <view class='container'> 666 </view> .container{ border: 2rpx black solid;... /* 左右居中 */ ... /* 设置行高 使文字上下居中 */ } 2 使用flex布局 <view class='c
  • 水平居中 <p style='display:flex;justify-content:center;'>水平方向居中</p> 效果 垂直居中 <div style='display: flex;width:100%;border:1px solid red;height:200px;'> <span style='...
  • 微信小程序水平居中,垂直居中

    万次阅读 2017-09-19 14:48:06
    display: flex;//必须有,不然没有效果 justify-content: center; align-items: center;
  • 微信小程序上下居中

    2020-08-05 18:21:16
    再wxss里写 display: flex; align-items: center; justify-content: center; text-align: center; 前三句是为了上下居中 第四句是水平居中
  • 微信小程序view居中

    2019-09-30 22:53:17
    .wxml <...水平居中</view> <view class='line_height' >垂直居中</view><view class='center' >水平居中||垂直居中</view> .wxss .text_align{ width: 350rpx; ...
  • 微信小程序文字居中

    万次阅读 2018-04-04 17:50:30
    文字居中: text-align:center;
  • 在使用map进行定位时,发现定位点不在视图的中心。如下图情况; 解决方式: 将type改为gcj02,完美解决“定位点不在视图中心的问题”。
  • 一、水平居中 1、排列方向为水平方向 .boxs{ display: flex; align-items: center; } 2、排列方向为竖直方向 .boxs{ display: flex; flex-direction: column; align-items: center; } ...
  • 微信小程序 元素居中

    千次阅读 2018-05-15 13:51:00
    2019独角兽企业重金招聘Python工程师标准>>> ...
  • 微信小程序水平居中和垂直居中

    千次阅读 2019-10-05 13:19:21
    配合使用 当 display: flex 配合 justify-content: center 使用时可以让view水平居中 而配合 align-items: center 用时可以实现垂直居中效果 如果没有达到效果,请设置height。 ...
  • 微信小程序文字居中 <view class='container'> <text>这是个例子 </text> </view> .container{ border: 2rpx black solid; width: 400rpx; height: 200rpx; display: flex; flex-...
  • 微信小程序view图片居中铺满

    千次阅读 2020-12-14 11:01:06
    wxml ... background-image:url('')/*图片地址*/ background-size: 100% 100%;/*图片显示大小*/ background-repeat:no-repeat;/*是否重复多个*/ background-position: center;/*图片位置*/ } ...
  • ;height:100%;text-align:center;' class="picture-2"> ;' class="infoImage" src="/pages/image/2.jpg" mode='widthFix'> </image> <view> 图片居中显示,适配不同机型
  • 微信小程序图片文字水平垂直居中对齐 要实现水平垂直居中 可使用如下方案 给父元素设置 .td { display: flex; align-items: center; justify-content: center; } 文字的水平居中 text-align: center; ...
  • 主要介绍了微信小程序如何调用图片接口API并居中显示,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
  • 主要介绍了微信小程序图片自适应支持多图实例详解的相关资料,需要的朋友可以参考下
  • 微信小程序图片水平居中显示

    千次阅读 2019-12-22 18:53:17
    在wxss文件中按下面代码写即可将图片水平居中。 .img1 { margin-top:100rpx; display:flex; justify-content: center; }
  • 从今天开始就来带领大家学习微信小程序了,只要你跟着我一步步来,相信你也可以上线一款属于自己的微信小程序 一,认识小程序 微信⼩程序,简称⼩程序,英⽂名 Mini Program Mini Program ,是⼀种不需要下载安装...
  • 主要介绍了微信小程序图片右边加两行文字的代码,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 6,103
精华内容 2,441
关键字:

微信小程序图片居中

微信小程序 订阅