微信小程序 wxss样式总结

2023-05-30 09:21:02新手学堂015

微信小程序 wxss样式总结,第1张

mode 属性：

默认值：scaleToFill —- 不保持纵横比例缩放，使的宽高完全拉伸至填满image标签

aspectFit —- 保持纵横比例缩放，使的长边能够完全显示出来，也就说可以完整的显示出来

aspectFill —– 保持纵横比例缩放，只保证的短边能够完全显示出来，也就是说，通常只在水平或垂直方向是完整的，另一个方向将会发生截取

top —- 不缩放，只显示的顶部区域

bottom —- 不缩放，只显示的底部区域

center —- 不缩放，只显示的中间区域

left —- 不缩放,只显示的左边区域

right —– 不缩放，只显示的右边区域

top left —- 不缩放,只显示的左上边区域

top right —- 不缩放,只显示的右上边区域

bottom left —- 不缩放,只显示的左下边区域

bottom right —- 不缩放,只显示的右下边区域

4隐藏NavigationBar

5VM11106:1 Do not have login handler in current page: pages/login/login Please make sure that login handler has been defined in pages/login/login, or pages/login/login has been added into appjson

解决方案：

2调整appjson中Pages里面的页面注册顺序；

3检查wxml中bindtap是否在js里面将方法创建。

6switch样式大小调整

大家都知道微信官方提供的switch 能改变color 但是改变大小常用的width height 不起作用

但是可以这样修改

7input 不沾满屏幕右侧有留白

使用flex布局的时候明明 input style 设置了flex＝1 的属性可是input还是站不满整个屏幕的宽度，右侧有留白，文字被遮挡，不知道是不是一个bug，

解决方案：在input外面包一层view style设置flex＝1 用于沾满整个屏幕 input用于显示文字

————————————————

1display取值

2float(取值：left，right，none，inherit。)

3clear：该属性指出不允许有浮动对象的边。（取值：left，right，both，none）

4visibility：是否显示对象(取值：visible，hidden，collapse。)

5overflow：处理溢出内容的方式。(取值：visible，hidden，scroll，auto。)

其他属性：

flex用法如下，很简单的：

as中的FlexArray可以放不同类型的值，['a',1,newobject()]

◆给FlexArray添加新元素

vararr:FlexArray=[1,2,3]

1直接添加

arr[3]=4

现在arr就是[1,2,3,4]

2使用length

arrlength=10

现在arr从第四个元素起到第十个元素全为空

3使用FlexArray的方法

push()添加元素到FlexArray末尾

arrpush(4,5,6)

现在为[1,2,3,4,5,6]

unshift()添加元素到FlexArray开头

arrunshift(4,5,6)

现在为[4,5,6,1,2,3]

splice(startIndex,deleteCount,item1,item2,itemn)

vararr:FlexArray=[1,2,3,4,5,6]

arrsplice(1,1)

arr为[1,3,4,5,6]

vararr:FlexArray=[1,2,3,4,5,6]

arrsplice(1,0,'1','2')

arr为[1,'1','2',2,3,4,5,6]

vararr:FlexArray=[1,2,3,4,5,6]

arrsplice(1)

arr为[1,2,3]

concat()连接FlexArray

vara:FlexArray=[1,2,3]

varb:FlexArray=[4,5,6]

varc=aconcat(b)

c为[1,2,3,4,5,6]

a仍为[1,2,3]

◆给FlexArray删除元素

1deleteFlexArray[index]

vararr:FlexArray=[1,2,3]

deletearr[1]

arr为[1,3]

2使用length

vararr:FlexArray=[1,2,3]

arrlength=2

arr为[1,2]

3pop()方法删除最后一个元素

4shift()方法删除第一个元素

5splice()

对FlexArray排序使用sort方法

vara:FlexArray=["b",'a','c','d']

asort()

默认是升序排列数组，首先排序分大小写,其次数字排序也是按照“字母排序”,而非数值大小排序。

可以使用FlexArrayDESCENDING常量来降序排列

asort(FlexArrayDESCENDING)

使用FlexArrayCASEINSENSITIVE使排序不区分字母大小写

使用FlexArrayNUMERIC以数值大小排序数字

使用FlexArrayRETURNINDEXEDFlexArray返回排序后的数组而不改变原数组

使用FlexArrayUNIQUESORT仅在数组数据独一无二时排序,否则返回0

<blockquote>目前小程序已在前端占了一席之地，最近公司项目上用的就是小程序开发，由于功能及页面不是很多，所以直接原生开发，毕竟坑可能会少点，在开发过程中，小程序自带导航栏和客户的设计稿导航栏排在一起，感觉很别扭，因此要求去掉微信的自带导航栏，微信提供了这方面的api，接下来我们就实操。</blockquote><div class="image-package"><img src=" https://upload-imagesjianshuio/upload_images/8877503-c85b39b2671d31b7jpeg " img-data="{"format":"jpeg","size":14897,"height":141,"width":963}" class="uploaded-img" style="min-height:200px;min-width:200px;" width="auto" height="auto"/>

</div>这是小程序官方文档截图，可以看到导航栏样式支持两种，默认是带导航栏，另外一种是自定义导航栏-custom，如果使用自定义导航栏，我们可以全局配置//appjson

"window": {

"navigationStyle": "custom"

}

单页面配置//pagejson

{

"navigationStyle": "custom"

}

效果对比

</div>能明显的看出来，自定义导航栏页面内容已经顶到屏幕顶端，除了胶囊按钮，其他都是页面可控区域。每个手机的屏幕都不一样，各家系统的状态栏高度也不一样，因此，我们在开发页面时要考虑屏幕的适配，有刘海的，要留出刘海的距离，没有的，要把状态栏高度留出来。1获取导航栏高度及按钮位置

微信提供了获取导航栏高度的Api和胶囊按钮位置的Api

// 系统信息

const systemInfo = wxgetSystemInfoSync();

// 胶囊按钮位置信息

const menuButtonInfo = wxgetMenuButtonBoundingClientRect();

在控制台打印出这两个Api返回结果<div class="image-package"><img src=" https://upload-imagesjianshuio/upload_images/8877503-7925dd39fb0ec47ajpeg " img-data="{"format":"jpeg","size":39744,"height":497,"width":679}" class="uploaded-img" style="min-height:200px;min-width:200px;" width="auto" height="auto"/>

</div>这里面我们只说几个我们接下来用到的参数。statusBarHeight // 状态栏高度

screenWidth // 胶囊的宽度

top // 胶囊到顶部距离

height // 胶囊的高度

right // 胶囊距离右边的距离

通过这几个参数，我们可以计算出状态栏的高度，微信胶囊所占的高度（存在padding值，可以使元素和胶囊纵向居中）

首先在appjs中定义全局data-globalDataglobalData: {

navBarHeight: 0, // 导航栏高度

menuBotton: 0, // 胶囊距底部间距（保持底部间距一致）

menuRight: 0, // 胶囊距右方间距（方保持左、右间距一致）

menuHeight: 0, // 胶囊高度（自定义内容可与胶囊高度保证一致）

新建个方法

setNavBarInfo() {

// 获取系统信息

const systemInfo = wxgetSystemInfoSync();

// 胶囊按钮位置信息

const menuButtonInfo = wxgetMenuButtonBoundingClientRect();

// 导航栏高度 = 状态栏到胶囊的间距（胶囊距上距离-状态栏高度） 2 + 胶囊高度 + 状态栏高度

thisglobalDatanavBarHeight = (menuButtonInfotop - systemInfostatusBarHeight) 2 + menuButtonInfoheight + systemInfostatusBarHeight;

thisglobalDatamenuBotton = menuButtonInfotop - systemInfostatusBarHeight;

thisglobalDatamenuRight = systemInfoscreenWidth - menuButtonInforight;

thisglobalDatamenuHeight = menuButtonInforight;

}

在onLaunch中调用，因为我这个项目是所有的导航都不用微信自带的，所以在appjs

中调用及设置data。 onLaunch() {

thissetNavBarInfo()

到这里所需要用到的都已经存了起来，页面用法也比较简单，排除状态栏的高度，设置导航栏的高度和胶囊高度保持，用flex布局。

2页面适配首先pagejs中定义变量var app = getApp()

Page({

/

页面的初始数据

/

data: {

navBarHeight: appglobalDatanavBarHeight, //导航栏高度

menuBotton: appglobalDatamenuBotton, //导航栏距离顶部距离

menuRight: appglobalDatamenuRight, //导航栏距离右侧距离

menuHeight: appglobalDatamenuHeight, //导航栏高度

}

})

页面使用

<view

class="capsule-box" style="style="height:{{menuHeight+menuBotton 2}}px; min-height:{{menuHeight}}px; line-height:{{menuHeight}}px; bottom:0px;padding:0 {{menuRight}}px;">

</view>

wxss

/ 公共导航 /

nav {

position: fixed;

top: 0;

left: 0;

box-sizing: border-box;

width: 100vw;

z-index: 1000;

}

nav-main {

width: 100%;

height: 100%;

box-sizing: border-box;

position: relative;

}

nav capsule-box {

position: absolute;

box-sizing: border-box;

width: 100%;

display: flex;

align-items: center;

}

最终效果<div class="image-package"><img src=" https://upload-imagesjianshuio/upload_images/8877503-ef017724a144e58cjpeg " img-data="{"format":"jpeg","size":4933,"height":105,"width":349}" class="uploaded-img" style="min-height:200px;min-width:200px;" width="auto" height="auto"/>

</div>

此种适配方案适应所有手机，应该说是最优的选择。

您好，微信小程序购物个人主页代码的设置，需要按照以下步骤进行：

1 首先，在小程序的开发工具中，打开个人主页的页面代码文件。

2 在“mywxml”文件中，可以设置个人主页的布局和内容。可以使用微信小程序提供的组件，来设计个人主页的界面。

3 在“mywxss”文件中，可以设置个人主页的样式。可以通过设置样式规则，来调整组件的颜色、大小、字体等属性，以达到自己想要的效果。

4 在“myjs”文件中，可以编写个人主页的逻辑代码。可以通过调用微信小程序提供的API，来实现一些功能，如获取用户信息、展示订单列表等。

5 最后，在“myjson”文件中，可以设置个人主页的一些配置信息，如页面标题、导航栏颜色等。

以上就是微信小程序购物个人主页代码的设置步骤，需要结合具体的需求和实际情况进行设计和调整。

下载一个app比翼多开，就可以实现，操作步骤如下：

一、下载软件。

二、打开软件找到加的符号。