微信小程序下滑滚动富文本弹出框

原生微信小程序，scroll-view下滑滚动富文本弹出框

一般用于阅读协议或长文本内容。需要用到的知识点：

微信小程序组件使用、scroll-view 标签使用

自定义弹出框readTip组件，以后可以复用

xml

<view class="readtip">
	<view class="scroll">
        <view class="title">
             温馨提示
        </view>
        <scroll-view scroll-y="true" style="height: 400rpx;"  >
            <view class="txt">
                “细胞浴”虽然能给您带来睡眠，美容，养生以及亚健康调理的良好帮助，但是亚健康调理是一项循序渐进的过程，为了您能够得到调理的最佳效果，强烈建议您不要短时间内连续体验，每天体验一次或2-3天使用1次“细胞浴”最佳！“细胞浴”虽然能给您带来睡眠，美容，养生以及亚健康调理的良好帮助，但是亚健康调理是一项循序渐进的过程，为了您能够得到调理的最佳效果，强烈建议您不要短时间内连续体验，每天体验一次或2-3天使用1次“细胞浴”最佳！
            </view>
        </scroll-view>
        <view class="chosebtn">
            <view style="border: 0.5px solid #7c8191;color: #403A2F;background-color: #fff;"
            bindtap="onClose"  >取消</view>
            <view bindtap="onSure">确认</view>
       </view>
      </view>
</view>

wcss

.readtip{
	position:fixed;
	top:0;
	bottom:0;
	left:0;
	right:0;
	background-color:rgba(0,0,0,.6);
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
}
.readtip .scroll{
    width:600rpx;
    background-color: #ffffff;
    height:640rpx;
    border-radius: 10rpx;
}
.readtip .scroll .title{
    text-align: center;
    font-weight: bold;
    font-size: 38rpx;
    line-height: 80rpx;
    margin-top: 20rpx;

}
.readtip .scroll .txt{
   line-height: 50rpx;
   padding: 20rpx;
   color: #333;
}
.readtip .scroll .chosebtn{
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin-top: 10px;
}
.readtip .scroll .chosebtn view{
    width: 120px;
    height: 40px;
    opacity: 0.96;
    background: #a57c01;
    border-radius: 30px;
    color: #ffffff;
    text-align: center;
    line-height: 40px;
}

js

// component/examples/index.js
Component({
	/**
	 * 组件的属性列表
	 */
	properties: {

	},

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

	/**
	 * 组件的方法列表
	 */
	methods: {
		onClose(){
			this.triggerEvent('onClose');
		},
		onSure(){
			this.triggerEvent('onSure');
        },
	}
})

父组件中使用

josn 文件引用readTip组件

{
  "usingComponents": {
        "readTip":"../../component/readTip/index"
  },
  "navigationBarTitleText":"xx"
}

wxml

<readTip wx:if="{{showover}}" bind:onClose="outpage" bind:onSure="closetip"></readTip>

js

  outpage(){
        wx.reLaunch({
            url: '/pages/startPage/startPage',
          })
    },
    closetip(){
        this.setData({ showover: false  })    
    },