微信小程序showModel内容换行和左对齐方法

在这里插入图片描述

初心:本人项目里面有个弹窗需求,样式如上所示,但是找了很多办法没有找到合适的,加入换行符也是默认居中显示的,没有左对齐的办法,通过大量查阅,找到了一个不健全的方法,就是下面的方案一,通过空白字符填充使所有的内容逼到了左边,但是下面的方法不适用于所有设备,有的设备上面还是不够对齐,搞得很头疼,于是索性自己封装了一个model组件,如方案二,几乎模仿了微信的弹窗样式,支持单个多个按钮的显示隐藏,事件触发,自定义单行多行布局,自定义按钮颜色以及内容颜色,多行内容布局可以自定义

方案一

使用小程序内置组件

    wx.showModal({
      title: '新人百天榜规则',
      content: '1.会员第一次开始100天\t\n2.至少训练过5次\u3000\u3000\u3000\t\n3.排名规则按照平均CK值\t',
      showCancel: false,
      confirmText: '我知道了',
      confirmColor:'#F58220',
      success(res) {
        if (res.confirm) {
          console.log('用户点击确定')
        }
      }
    })

换行加\t\n,左对齐加\u3000空格占位即可

注意:上面的换行符在微信开发者工具不生效,真机调试后可以查看效果正常

方案二

自定义组件

在小程序根目录新建components文件夹,里面新建model文件夹,在model文件夹上面右键新建Component,命名为model,将下面代码对应复制到对应的文件内,然后找到app.json,新建usingComponents节点(如果有的话就不用新建了,跟pages同级),内容为"model": "/components/model/model",保存后就能使用组件了

model.wxml

<view class="container">
  <view class="popUpNotificationBox">
    <view class="title" style="color: {{titleTextColor}};font-size: {{titleTextFontSize}};font-weight: {{titleTextFontWeight}};">{{title}}</view>
    <view class="{{whetherMultipleLines&&slotName=='box'?'default':(whetherMultipleLines?'contentBox':'contentBoxOneTitle')}}" style="padding: {{contentBoxPadding}};color:{{contentBoxColor}};font-size: {{contentBoxFontSize}};">
      <view wx:if="{{!whetherMultipleLines}}">{{content}}</view>
      <view wx:if="{{whetherMultipleLines&&slotName=='box'}}">
        <slot></slot>
      </view>
      <view wx:if="{{whetherMultipleLines&&slotName!='box'}}" class="moreLine" style="flex-direction: {{contentBoxFlexDirection}};align-items:{{contentBoxAlignItems}};justify-content:{{contentBoxJustifyContent}};">
        <view wx:for="{{contentList}}" wx:key="index">{{item}}</view>
      </view>
    </view>
    <view class="cancelConfirmButtonBox">
      <view bind:tap="sendValueToParent" data-tips="cancel" wx:if="{{moreBtn}}" class="cancelText" style="color: {{cancelTextColor}};font-size: {{bottomBtnFontSize}};">{{cancelText}}</view>
      <view wx:if="{{moreBtn}}" bind:tap="sendValueToParent" data-tips="confirm" class="confirm" style="color: {{confirmTextColor}};font-size: {{bottomBtnFontSize}};">{{confirmText}}</view>
      <view wx:if="{{!moreBtn}}" bind:tap="sendValueToParent" data-tips="onceBtn" class="onceBtn" style="color: {{onceBtnTextColor}};font-size: {{bottomBtnFontSize}};">{{onceBtnText}}</view>
    </view>
  </view>
</view>

model.wxss

css

.container {
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100000000;
  /* 给定最高层级 */
  display: flex;
  justify-content: center;
  align-items: center;
}

.popUpNotificationBox {
  width: 640rpx;
  min-height: 376rpx;
  background-color: #fff;
  border-radius: 24rpx;
  overflow: hidden;
}

.title {
  width: 100%;
  text-align: center;
  line-height: 112rpx;
  height: 112rpx;
}

.contentBox {
  min-height: 152rpx;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.default{
  min-height: 152rpx;
  width: 100%;
}
.contentBoxOneTitle {
  min-height: 152rpx;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.cancelConfirmButtonBox {
  height: 112rpx;
  width: 100%;
  border-top: 2rpx rgba(0, 0, 0, 0.1) solid;
  display: flex;
}

.cancelText {
  width: 320rpx;
  text-align: center;
  height: 112rpx;
  line-height: 112rpx;
}

.confirm {
  width: 320rpx;
  text-align: center;
  height: 112rpx;
  line-height: 112rpx;
  border-left: 2rpx solid rgba(0, 0, 0, 0.1);
}

.onceBtn {
  text-align: center;
  height: 112rpx;
  line-height: 112rpx;
  width: 100%;
}

.moreLine {
  width: 100%;
  height: 100%;
  display: flex;
}

model.js

// components/model/model.js
Component({

  /**
   * 组件的属性列表
   */
  properties: {
    title: { //标题
      type: "String",
      value: '提示'
    },
    titleTextColor:{
      type: "String",
      value: '#353535'
    },
    titleTextFontSize:{
      type: "String",
      value: '34rpx'
    },
    slotName:{
      type: "String",
      value: 'default'
    },
    titleTextFontWeight:{
      type: "String",
      value: '500'
    },
    cancelText: {
      type: "String",
      value: '取消'
    },
    cancelTextColor: {
      type: "String",
      value: '#000000'
    },
    confirmText: {
      type: "String",
      value: '确认'
    },
    confirmTextColor: {
      type: "String",
      value: '#49B9FF'
    },
    moreBtn: {
      type: "Boolean",
      value: true
    },
    onceBtnText:{
      type:"String",
      value:"我知道了"
    },
    onceBtnTextColor:{
      type:"String",
      value:"#49B9FF"
    },
    content:{
      type:"String",
      value:"此处填写您要展示的数据"
    },
    whetherMultipleLines:{
      type: "Boolean",
      value: true
    },
    contentList:{
      type:"Array",
      value:['数据一','数据二','数据三']
    },
    contentBoxPadding:{
      type:"String",
      value:"0rpx 58px"
    },
    contentBoxAlignItems:{
      type:"String",
      value:"center"
    },
    contentBoxFlexDirection:{
      type:"String",
      value:"column"
    },
    contentBoxJustifyContent:{
      type:"String",
      value:"center"
    },
    contentBoxColor:{
      type:"String",
      value:"#353535"
    },
    contentBoxFontSize:{
      type:"String",
      value:"34rpx"
    },
    bottomBtnFontSize:{
      type:"String",
      value:"34rpx"
    }
  },

  /**
   * 组件的初始数据
   */
  data: {

  },

  /**
   * 组件的方法列表
   */
  methods: {
    sendValueToParent: function(e) {
      // 将点击的按钮事件传递给父组件
      this.triggerEvent('customEvent', { clickBtn: e.currentTarget.dataset.tips });
    }
  }
})

找到app.json,新建usingComponents节点(如果有的话就不用新建了,跟pages同级),内容为"model": "/components/model/model",如下所示:

{
  "pages": ["pages/index/index"],
  "usingComponents": {
    "model": "/components/model/model"
  }
}

使用组件

使用组件的页面js文件如下

Page({
  data: {},
  onLoad() {},
  // 监听按钮点击事件()
  handleCustomEvent(e){
    console.log(e.detail.clickBtn); // confirm 确定 / cancel 取消 / onceBtn 一个按钮点击
  },
})

使用组件的页面wxml文件如下

  <!-- 自定义model -->
  <model title="你好" titleTextColor="red" titleTextFontSize="20rpx" titleTextFontWeight="600" cancelText="我不干了" cancelTextColor="blue" confirmText="我想要" confirmTextColor="red" moreBtn="{{false}}" onceBtnText="朕已阅"  onceBtnTextColor="pink" whetherMultipleLines="{{true}}" slotName="box" content="哈哈哈哈" contentList="{{['我爱你','爱着你','非常爱你']}}" contentBoxPadding="0rpx 58rpx" contentBoxAlignItems="flex-start" contentBoxFlexDirection="row" contentBoxJustifyContent="flex-start" contentBoxColor="red" contentBoxFontSize="40rpx" bottomBtnFontSize="40rpx" bind:customEvent="handleCustomEvent">这是插槽内容</model>

参数详解:

title：弹窗标题
titleTextColor：弹窗标题文字颜色
titleTextFontSize：弹窗标题文字大小
titleTextFontWeight：弹窗标题文字粗细
cancelText：取消按钮文字
cancelTextColor：取消按钮文字颜色
confirmText：确定按钮文字
confirmTextColor：确定按钮文字颜色
moreBtn：是否显示多个按钮
onceBtnText：单个按钮时的按钮文字
onceBtnTextColor：单个按钮文字颜色
whetherMultipleLines：是否显示多行内容（需要contentList有值,或者slotName为box使用插槽形式,可同时存在，优先使用插槽）
slotName：值为box代表开启使用插槽，也就是内容区域页面可以自定义的
content：单行文本内容（whetherMultipleLines需要为false）
contentList：多行文本内容（whetherMultipleLines需要为true）
contentBoxPadding：内容区域的填充（padding属性的值）
contentBoxAlignItems：多行内容时的交叉轴布局方式
contentBoxFlexDirection：多行内容时的布局方式
contentBoxJustifyContent：多行内容时主轴布局方式
contentBoxColor：内容区域的文字颜色
contentBoxFontSize：内容区域的文字大小
bottomBtnFontSize：底部按钮文字大小
customEvent：按钮点击时向父组件发射的事件（e.detail.clickBtn的值分别为confirm确定/cancel取消/onceBtn一个按钮点击）

微信小程序showModel内容换行和左对齐方法 ​

方案一 ​

使用小程序内置组件 ​

方案二 ​

自定义组件 ​

model.wxml ​

model.wxss ​

model.js ​