2020//7/6学习记录

2020//7/6学习记录1.微信小程序圆角样式border-radius:20rpx;2.微信小程序横向布局display: flex;/*row 横向 column 列表 */flex-direction: row;/* 左右居中 */justify-content: center;/* 上下居中 */align-items: center;3.文字左右布局父元素用到:justify-content:space-between;子元素:<viewstyle…

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

日常记录,非技术型分享,有错误希望大家帮我指正

 

1.微信小程序圆角样式

border-radius: 20rpx;

2.微信小程序横向布局

display: flex;

/*row 横向 column 列表 */

flex-direction: row;

/* 左右居中 */

justify-content: center;

/* 上下居中 */

align-items: center;

3.文字左右布局

2020//7/6学习记录

父元素用到:justify-content:space-between;

子元素:

    <view style=”text-aligin:left;padding-left:20rpx;”>我发起的团购</view>

    <view style=”text-aligin:right;padding-right:20rpx;”>发起</view>

4.微信小程序文字悬浮图片上方

2020//7/6学习记录

<view class=”img-parent”>

        <image src=”{
{}}”  mode=’widthFix’ class=”list-pic”></image>

        <view class=”child” wx:if=”{
{item.isEnd ==false}}”>

          活动还剩2天

        </view>

        <view class=”child_end” wx:if=”{
{item. isEnd ==true}}”>

          活动结束了

        </view>

 </view> 

样式部分:

.img-parent{

  height: 300rpx; 

  width: 330rpx;

  position: relative;

}

.child {

  width: 100px;

  height: 50rpx;  

  position: absolute;

  left: 130rpx;

  top: 10rpx;

  margin: auto;

  text-align: center;

  background: yellowgreen;

  border-top-left-radius: 15px;

  border-bottom-left-radius:15px;

 

.child_end {

  width: 100px;

  height: 50rpx;  

  position: absolute;

  left: 130rpx;

  top: 10rpx;

  margin: auto;

  text-align: center;

  background: gray;

  border-top-left-radius: 15px;

  border-bottom-left-radius:15px;

5.微信小程序bindtap跳转页面

<view bindtap=”test”>跳转</view>

js部分

test:function(){

 wx.navigateTo({

      url: ”

   })

}

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/171052.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号