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

    千次阅读 2021-01-17 17:58:02
    .wxml水平居中垂直居中水平居中||垂直居中.wxss.text_align{width: 350rpx;height: 350rpx;background-color: gray;text-align: center; /** 水平居中 **/}.line_height{width: 350rpx;height: 350rpx;...

    .wxml

    水平居中

    垂直居中

    水平居中||垂直居中

    .wxss

    .text_align{

    width: 350rpx;

    height: 350rpx;

    background-color: gray;

    text-align: center; /** 水平居中 **/

    }

    .line_height{

    width: 350rpx;

    height: 350rpx;

    background-color: orange;

    line-height: 350rpx; /** 垂直居中 **/

    }

    .center{

    width: 350rpx;

    height: 350rpx;

    background-color: brown;

    line-height: 350rpx; /** 垂直居中 **/

    text-align: center; /** 水平居中 **/

    }

    原文:https://www.cnblogs.com/lsyy2017/p/11461551.html

    展开全文
  • 场景描述:view内部文字不能自适应宽度,如下图: 解决办法: <view class="tabWrap1" style="white-space: nowrap"> <view>全部</view> <view>瓜果蔬菜类</view> <view>...

    场景描述:view内部文字不能自适应宽度,如下图:
    在这里插入图片描述

    解决办法:

    <view class="tabWrap1"  style="white-space: nowrap">
    	<view>全部</view>
    	<view>瓜果蔬菜类</view>
    	<view>服装类</view>
    	<view>管过蔬菜类1</view>
    	<view>服装类1</view>
    </view>
    

    在列表的父级view添加white-space: nowrap样式,结果如下图:
    在这里插入图片描述

    展开全文
  • 满意答案2105wy12017.01.20采纳率:42%等级:9已帮助:813人小程序”实质上是基于微信公众平台的一种应用号,和订阅号、服务号一样是为组织用户提供服务的。从一定程度上可以将“小程序”理解为简化版的应用,而微信...

    满意答案

    02ae427d08e371d7e90d5b995e828d6d.png

    2105wy1

    2017.01.20

    02ae427d08e371d7e90d5b995e828d6d.png

    采纳率:42%    等级:9

    已帮助:813人

    小程序”实质上是基于微信公众平台的一种应用号,和订阅号、服务号一样是为组织用户提供服务的。从一定程度上可以将“小程序”理解为简化版的应用,而微信希望通过“小程序”的推出,建立起以微信为核心的类似于AppStore的生态系统。2、小程序的适用场景:(1)、适用于初创企业由于微信自身用户群体数量庞大,且用户粘度强。企业利用小程序提供服务,能够更直接地接触受众,减少了用户引流的成本。又因为“小程序”的功能实现主要依赖于H5技术,为服务方降低了应用开发成本,也降低了应用行业的准入门槛。所以,对于初创企业来说,可以利用小程序开展产品的用户体验测试。(2)、适用于在线旅游服务微信本身是社交平台,要提供多元化的服务,以微信为入口的小程序,不可避免地会对微信的运行速度造成一定影响。因此,考虑到这一点,使用小程序提供服务,更适合支撑低频次且具备一定社交属性的消费行为。这恰好适合在线旅游应用的产品特性。所以对于致力于在微信平台获取用户的在线旅游企业来说,小程序的推出会是个机会窗口。的是通过小程序让用户体验产品的特性,为原生APP提供一个更有效的连接方式。3、小程序与APP的优劣PK:小程序的优势:(1)与原生应用相比,小程序不需要下载安装,只需在微信中搜索或扫码即可打开应用。(2)用户操作简便,在固有的微信平台上就可以使用企业组织提供的相关服务,而简化了对应用“下载、安装、注册、卸载”的过程。(3)占用内存少,也体现了“用完即走”的理念,用户不用关心是否安装太多应用的问题。(4)对于服务方,小程序的所有功能依靠H5实现,开发成本和入行门槛大大降低。企业组织的所有用户(粉丝)积累,都是基于微信平台和微信公众账号操作的。一旦微信有任何变动,比如封号或下架“小程序”,企业组织的用户积累将受到极大损失。使用微信作为入口,在这种情况下,对小程序和用户的控制权掌握在微信和企业两方手中,远不如开发自身的APP来得踏实安心。4、对小程序的发展展望:从企业传播上来看,小程序(应用号)和订阅号、服务号,可以共同构成企业组织在微信上的运营矩阵。订阅号做品牌推广、服务号提供企业讯息服务,而小程序(应用号)则负责产品的测试体验。“小程序”作为实现企业宣传和完善服务的一部分,在未来的一段时间里会被广泛运用、开发。

    022分享举报

    展开全文
  • 微信小程序点击其他元素,当前view隐藏实现方法(自测有用) 需求:点击设备的三个小点点,展示删除按钮。点击其他任意处时,让这个按钮隐藏。 实现思路:用一个模拟元素,接收点击“任意处位置”的tap事件。 先看...

    微信小程序点击其他元素,当前view隐藏实现方法(自测有用)

    在这里插入图片描述

    需求:点击设备的三个小点点,展示删除按钮。点击其他任意处时,让这个按钮隐藏。

    实现思路:用一个模拟元素,接收点击“任意处位置”的tap事件。
    先看架构:
    在这里插入图片描述

    <view class="item" bindtap="_clickItem">
      <view class="title">
        <view class="name">{{name}}</view>
        <view class="function">
          <view class="dot" hover-class="tap" hover-start-time="0" hover-stay-time="0" catchtap="_operation">
            <view>.</view>
            <view>.</view>
            <view>.</view>
          </view>
          <view wx:if="{{show}}" class="bg" catchtap="_hide"></view>
          <view wx:if="{{show}}" class="show">
            <view class="delete" catchtap="_deleteItem">
              <image src="/public/icon/delete.png" mode="widthFix" />
              <view>解除</view>
            </view>
          </view>
        </view>
      </view>
      <view class="_wrapper">
        <image class="eq_icon" src="/public/icon/electronic_balance.png" mode="widthFix" />
        <view class="status">已绑定</view>
      </view>
    </view>
    

    css样式把.bg设置成固定定位,横向和竖向沾满屏幕
    部分代码:

    .tap {
      opacity: 0.6;
    }
    
    .item .title {
      display: flex;
      justify-content: space-between;
    }
    
    .item .title .function {
      position: relative;
    }
    
    .item .title .function>.dot {
      padding: 0 10rpx;
    }
    
    .item .title .function>.dot>view {
      height: 12rpx;
      line-height: 4rpx;
      font-weight: bold;
      color: #c2c2c2;
    }
    
    .item ._wrapper {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      padding-top: 70rpx;
    }
    
    .item ._wrapper .eq_icon {
      width: 89rpx;
      height: 89rpx;
    }
    
    .item ._wrapper .status {
      font-size: 32rpx;
      color: #c2c2c2;
    }
    
    .item .title .function .show {
      position: absolute;
      bottom: -100rpx;
      right: -30rpx;
      width: 100rpx;
      background: #ffffff;
      box-shadow: 0px 0px 9rpx 0px rgba(0, 0, 0, 0.5);
      border-radius: 10rpx;
      padding: 20rpx 30rpx;
      z-index: 1001;//层级高于辅助元素
    }
    
    .item .title .function .show::after {
      position: absolute;
      content: "";
      top: -15rpx;
      right: 20%;
      display: block;
      width: 0;
      height: 0;
      border-radius: 4px;
      border: 16rpx solid transparent;
      border-left-color: #fff;
      border-top-color: #fff;
      transform: scaleX(0.8) rotate(45deg);
      box-shadow: 0px 0px 9rpx 0px rgba(0, 0, 0, 0.5);
      z-index: 1;
    }
    
    .item .title .function .show::before {
      position: absolute;
      content: "";
      width: 40rpx;
      height: 24rpx;
      top: -0rpx;
      right: 16%;
      background-color: rgb(255, 255, 255);
      z-index: 2;
    }
    
    .item .title .function .show>view {
      display: flex;
      align-items: center;
      justify-content: center;
      color: #252525;
      font-size: 28rpx;
    }
    
    .item .title .function .show .delete>image {
      width: 28rpx;
      height: 28rpx;
      margin-right: 14rpx;
    }
    
    .item .title .function .bg{
      position: fixed;
      width: 100vw;
      height: 100vh;
      top: 0;
      left: 0;
      z-index: 1000;//层级高点,但是不能超过那个删除按钮的层级
    }
    

    js代码:

    Component({
      data: {
        show: false
      },
      properties: {
        name: String
      },
      methods: {
        _operation() {
          this.setData({
            show: !this.data.show
          })
        },
        _clickItem() {
          this.triggerEvent('clickItem')
        },
        _hide() {
          this.setData({
            show: false
          })
        },
        _deleteItem() {
          let _this = this;
          wx.showModal({
            title: "是否解除当前设备?",
            success() {
              _this.triggerEvent('deleteItem')
            },
            complete() {
              _this.setData({
                show: false
              })
            }
          })
    
        }
      }
    })
    
    展开全文
  • 完整微信小程序(Java后端) 技术贴目录清单页面(必看) 微信小程序框架为开发者提供了一系列完备的UI组件,方便开发者快速构建小程序UI界面。借助这些UI组件开发者...视图容器(View)是小程序框架组件中最常见的基础组件
  • 今天在写一个滚动导航栏的时候发现 view的文本自动换行了,用了display:flex;flex-warp:nowarp;也不管用, wxml: {{item}} wxss: .top{ width: 100%; height: 100rpx; background-color: #F6F5F6; display: ...
  • <view class="list-box" bindtap="click" data-id="{{item.id}}" style="background-...扩展:如果使用的是image标签想要设置相关熟悉,微信小程序内部有相关设置可以直接使用。 https://developers.weixin.qq.c
  • 小程序 View居中显示

    2021-04-17 10:43:08
    代码很简单,如下: .view{ display:flex; width:70%; margin:0 auto; }
  • 假设现在点击某个view需要跳转到小程序内一个新的页面,并希望携带name和sex参数。 场景一(固定传值) 一、WXML代码 <view data-name="Tom" data-sex="man" bindtap="test"></view> 二、JS代码 /** ...
  • 视图容器view上设置 view{ display: flex;...即可实现div容器中内容的水平垂直居中,那么今天我们来用flex弹性盒子来实现小程序view视图容器里面内容的水平垂直居中,话不多说,直接上代码: //wxml <v
  • 宽度设置为如下即可[对于position:absolute;情况也适用]: width: -webkit-fill-available;
  • 微信小程序 做淡入淡出效果。先来个视频说下实际效果 必备知识:csstransition 属性 在使用transition中,并没有很高深的使用。只是简单的用了一个时间。 我在查找的方法中有很多,比如说是滑动的原生组件,...
  • view class="itemEdit" wx:for="{{itemList}}"> <view>{{item.value}}</view> <view>修改</view> <view>删除</view> </view> 以上html实际渲染结果为 附...
  • 微信小程序view并列

    2021-04-27 09:44:32
    view class="box"> <view class="box1"></view> <view class="box2"></view> </view> .box{ display:flex; flex-direction:row; justify-content:flex-start; } .box1{ ...
  • 换行: word-break:break-all; word-wrap:break-word; white-space:pre-line; 居中: display:flex; align-items:center; justify-content:center; text-align:center; //加上这个起到换行后的内容也会......
  • 小程序view绑定点击事件分析:源码 点击使view发生变化 分析: e.target 和 e.currentTarget 混淆,导致触发事件 却不传值 问题原理: (主要用于页面传值) 1、如果绑定的事件所在元素没有子元素,用e.target和e....
  • 主要是 在 view 组件中设置: display:flex; //显示 样式 固定 justify-content:center; // 内容 左右居中 align-items:center; //内容 上下居中
  • .function{background:#21262D;border-radius: 5pt;....function view{width: 50%;float: left;text-align: center;color: white;font-size: 10pt;height: 100%;display: flex;justify-content: center;align-i
  • 微信小程序view标签hover-class属性和text标签selectable和decode属性 <view hover-class="hc">按下样式</view>//设置view标签并添加属性 .hc{ color: red;}//设置hover-class的样式 效果: <text&...
  • 微信小程序 view样式

    2021-06-22 09:15:09
    (1)微信小程序View的布局 https://www.jianshu.com/p/862dfa698523 微信小程序样式众多,这里介绍最为常用的view 小程序 View 支持两种布局方式:block 和 flex 所有 View 默认都是 block 要使用 flex 布局的话...
  • 但是,阅读小程序官方文档后,只有两种情况会触发转发操作 1. 点击小程序右上角的转发按钮 2. button标签添加open-type="share"属性 其他情况,均不可以 # 想一想 后来想了想,可以通过元素标签判断,比如判断一...
  • 微信小程序拖拽view

    2021-03-11 17:34:52
    view class="yidong" bindtap="btn_Suspension_click" catchtouchmove="buttonMove" bindtouchstart="buttonStart" bindtouchend="buttonEnd" style="top:{{buttonTop}}px;left:{{buttonLeft}}px;"> <view ...
  • 整理微信小程序控制view隐藏显示的五种方法一、使用wx:if指令。二、使用opacity属性三、使用display属性四、还有一种方式可以使用绝对定位,五、使用hidden属性 一、使用wx:if指令。 <view wx:if="{{3>2}}"&...
  • 微信小程序中通过web-view加载html页面前提条件: 1、必须申请认证企业账号,配置业务域名 2、必须发好调用的html页面服务 3、同时服务必须是https的服务 微信开发者工具开发调试可以取消https校验和业务域名的...
  • 本文主要介绍微信小程序实现动态改变view标签宽度和高度的方法,涉及微信小程序事件响应及使用setData针对data数据动态操作相关实现技巧,希望能帮助到大家。1、效果展示2、关键代码index.wxml文件>我是view标签,...
  • 微信小程序中如何实现动态改变view标签宽度和高度,程序,宽度,标签,动态,高度微信小程序中如何实现动态改变view标签宽度和高度易采站长站,站长之家为您整理了微信小程序中如何实现动态改变view标签宽度和高度的相关...
  • 公司的一个项目,使用uniapp开发钉钉小程序,其中一个应用是在 web-view 里面加载一个h5页面,h5页面有一个按钮,点击时返回钉钉小程序上一个页面。 是不是感觉很简单,拿起钉钉开发者文档或者uniapp开发文档使用CV...
  • 本文实例讲述了微信小程序实现动态改变view标签宽度和高度的方法。分享给大家供大家参考,具体如下:1、效果展示2、关键代码index.wxml文件>我是view标签,我现在的宽度是{{view.Width}}px,高度是{{view.Height}}...
  • 最近在各大论坛里,看到很多人在问“微信小程序显示隐藏view元素和滚动条”等相关问题,作为一名微信小程序开(tian)发(keng)者(ren),今天就在这里为大家分享,如何显示隐藏微信小程序view元素和滚动条吧,希望...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 560,937
精华内容 224,374
关键字:

小程序view

友情链接: NHT.zip