小程序实现的一些常用小例子

Posted 2022-12-28 老张在线敲代码

标签属性详情看微信开发者文档

input篇 密码框睁眼闭眼效果

页面htm文件

<view class='parentstyle '>
    <view class='centerStyle' bindtap="show">
      <input password='passwordType' maxlength="20" placeholder="请输入密码" style='font-size:34rpx'></input>
      <text style="display: block;width:100rpx" wx:if="isShow" class='imageStyle' bindtap='eyeStatus'>defaultType? "闭眼": "睁眼"</text>
    </view>
</view>

页面css文件

.parentstyle 
  display: flex;
  align-items: center;
  border: 1rpx solid #e0e0e0;
  border-radius: 10rpx;
  box-shadow: 0 0 5rpx #e0e0e0;
  margin: 30rpx 38px;
  padding: 20rpx;


.parentstyle .imageStyle 
  width: 41rpx;
  height: 41rpx;
  margin-right: 20rpx;


.parentstyle .centerStyle 
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: space-between;
  font-size: 28rpx;

页面js文件

Page(
  data: 
    defaultType: true,
    passwordType: true,
    isShow:false
  ,
  //defaultType：眼睛状态   passwordType：密码可见与否状态
  eyeStatus: function()
    this.data.defaultType= !this.data.defaultType
    this.data.passwordType= !this.data.passwordType
    this.setData(
      defaultType: this.data.defaultType,
      passwordType: this.data.passwordType,
  
  )

  ,
show()
this.setData(
  isShow:true
)

)

scroll-view滚动篇

纵向

页面htm文件

//scroll-y开启纵向滚动
<!--pages/home/home.wxml-->
  <scroll-view class="box" scroll-y>
    <view wx:for="arr" wx:key="index">
      item
    </view>
    
  </scroll-view>

页面css文件

/* pages/home/home.wxss */
.box
  display: flex;
  justify-content: space-between;
  border: 1rpx solid black;
  width: 100rpx;
  height: 120rpx;

.box view
  width: 100rpx;
  height: 100rpx;
  text-align: center;
  line-height: 100rpx;

//奇偶数判断
.box view:nth-child(2n)
  background: red;

.box view:nth-child(2n-1)
  background: blue;

页面js文件

//数据源设置
data: 
    arr:['a','b','c','d','e','f','g']
  ,

横向

页面htm文件

<!--pages/home/home.wxml-->
  <scroll-view class="box" scroll-x>
    <view wx:for="arr" wx:key="index">
      item
    </view>
    
  </scroll-view>

页面css文件

/* pages/home/home.wxss */
.box
  display: flex;
  justify-content: space-between;
  border: 1rpx solid black;
  overflow-x: auto;
  width: 340rpx;
  height: 100rpx;
  white-space: nowrap;

.box view
  display: inline-block;
  width: 100rpx;
  height: 100rpx;
  text-align: center;
  line-height: 100rpx;

.box view:nth-child(2n)
  background: red;

.box view:nth-child(2n-1)
  background: blue;

页面js文件

//数据源设置
data: 
    arr:['a','b','c','d','e','f','g']
  ,

swiper轮播图篇

页面htm文件

<!--pages/home/home.wxml-->
  <swiper class="box" indicator-dots >
    <swiper-item wx:for="arr" wx:key="index">
      item
    </swiper-item>
    
  </swiper>

页面css文件

/* pages/home/home.wxss */
.box
  height: 400rpx;

.box swiper-item
  width: 100%;
  text-align: center;
  line-height: 400rpx;

.box swiper-item:nth-child(2n)
  background: red;

.box swiper-item:nth-child(2n-1)
  background: blue;

页面js文件

//数据源设置
data: 
    arr:['a','b','c','d','e','f','g']
  ,

text篇 长按选中效果

<!--pages/home/home.wxml-->
  <view >
   长按选中手机号：<text user-select>1843678656</text>
  </view>

rich-text篇 富文本

<!--pages/home/home.wxml-->
  <view >
    <rich-text nodes="<h1 style='color:blue'>我是标题</h1>"/>
  </view>