专栏首页算法与编程之美微信小程序|vant-dist的引用与屏幕宽度的获取

微信小程序|vant-dist的引用与屏幕宽度的获取

问题描述

微信小程序中需要用到许多代码,且毫无规律而言,对于刚接触微信小程序开发的开发者来说,想要完全记住并流畅的使用必定是难上加难的,那么有没有什么方法能够有效地解决这个问题呢?

在开发微信小程序时,我们插入图片或设置样式是不会随着模拟器型号的改变而随着模拟器屏幕宽度而改变的,如下图(注意模拟器型号的变化):

图1 未获取屏幕宽度的轮播图

那要调用怎样的代码才能获取到屏幕宽度呢?

解决方案

2.1 对于vant-dist的引用,需要在网站上下载vant-weapp-dev压缩包,再将其解压,解压成功后将其中的dist文件直接复制到我的微信小程序项目文件夹的根目录中,即可直接调用vant中的源代码。

2.2 获取屏幕宽度的代码:

Js-date代码:

a: 0,//将屏幕宽度赋值(任意)

Js-onload-function代码:

let screenWidth = wx.getSystemInfoSync().screenWidth;this.setData({a: screenWidth})//修改给屏幕宽度赋的值

wxml代码:

<image src="{{item.url}}" class="slide-image"style='width:{{a}}px;height:500rpx;'/> //将设置的图片style中宽度’width’设为所赋值的代号

设置后效果:

图2 获取屏幕宽度后轮播图效果

结语

对于从外部引入的vant-dist插件中有许许多多代码,还需要多多实践,根据需要从中调用。在开发微信小程序时对于模拟器的屏幕宽度的获取是必要的。

END

实习编辑 | 王文星

责 编 | 李 娇

本文分享自微信公众号 - 算法与编程之美(algo_coding)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-12-21

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 小程序textarea与弹窗

    在小程序 textarea 组件上展示一个模态弹窗组件,会发现 textarea 中输入的文字内容,会直接穿透模态弹窗显示在最上面,而且还能点击输入文字。

    IMWeb前端团队
  • 百度SEO排名,最近频繁波动,到底怎么办?

    在2019年,我们已经不止一次再谈论百度SEO排名的问题,特别是最近,很多站长都会遇到排名大涨大降的情况,特别是感觉自己并没有采用过度优化的方式,仍然存在诸多问...

    蝙蝠侠IT
  • 微信小程序之构建

    由于小程序更新迭代速度很快,而且我们的技术栈是 react 全家桶,所以在对比 wepy 和 mpvue 之后,我们选择了直接使用原生小程序。对比图如下:

    IMWeb前端团队
  • 腾讯IMWeb团队招聘web前端开发工程师, base 深圳

    腾讯IMWeb团队招聘web前端开发工程师, base 深圳(年前年后入职灵活安排,简历请投递 jayccchen@tencent.com)。

    IMWeb前端团队
  • 微信小程序初体验

    我把微信小程序当做一个框架来探索,因为它的基本语法还是前端,因此对我(前端)来说,并不是一门新的语言

    IMWeb前端团队
  • 腾讯在线教育小程序开发实践之路

    每个业务下都有PC Web,客户端,H5,APP这几端,来满足学生的多端上课需求。但由于教育的前身是基于QQ群视频孵化出来的,后续也是围绕QQ生态去搭建产品形态...

    IMWeb前端团队
  • 水蒸气热物性参数计算-IAPWS97.js

    一个计算水蒸气性质的js库,可以根据压力和温度确定其他参数,如熵、焓,导热系数、比热、表面张力系数等:

    周星星9527
  • 微信小程序之购物车功能

    以往的购物车,基本都是通过大量的 DOM 操作来实现。微信小程序其实跟 vue.js 的用法非常像,接下来就看看小程序可以怎样实现购物车功能。

    IMWeb前端团队
  • 【腾讯课堂】视频点播上云实践

    腾讯课堂是一款通过线上的直播与点播向用户提供在线教育服务的产品,从 2014 年成立至今,已累计存储了 250 万个视频,共 600 TB,累计时长 150 万...

    IMWeb前端团队
  • 导热控制偏微分方程的推导Edition2

    《传热学》相关小程序演示动画如下(其中下图1D非稳态导热计算发散,调小时间步长后重新计算,结果收敛!):

    周星星9527

扫码关注云+社区

领取腾讯云代金券